如何设置网页背景图全屏无裁剪且匹配XD设计稿定位

现有代码仅配置了背景图路径和容器尺寸，缺少背景图的尺寸、定位、重复规则配置，因此会触发浏览器默认的背景渲染逻辑，导致裁剪。
正确实现代码如下：

/* 全局重置，消除浏览器默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-image: url('image/background1-1.png');
  /* 固定使用图片原始尺寸，不做缩放 */
  background-size: 1920px 1080px;
  /* 背景图居中对齐 */
  background-position: center center;
  /* 禁止背景图重复平铺 */
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  /* 禁止页面滚动 */
  overflow: hidden;
}

注意：若设备视口尺寸小于1920*1080，无法同时满足「不缩放、不裁剪、全屏」三个条件，三个条件仅能同时满足两个。如果允许图片等比缩放适配屏幕，可将background-size属性值改为contain，即可实现全屏无裁剪。

该问题的常见诱因及对应解决方案如下：

• 缺少全局样式重置：浏览器会给body等元素默认添加margin/padding，导致元素基准偏移，先添加上述问题1中的全局重置代码即可解决。
• 定位参照基准和设计稿不一致：XD的top/left标注是相对于设计稿画布左上角的，如果你直接给元素设置绝对定位，默认会相对于根节点偏移，如果你页面内容是居中的1920px宽容器，就会出现错位。需要给和设计稿画布尺寸一致的父容器添加相对定位：

/* 和XD画布尺寸一致的父容器 */
.page-container {
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  position: relative;
}

• 定位属性缺失：需要定位的元素必须显式设置position: absolute属性，否则top/left属性不会生效，示例代码如下：

.target-text {
  position: absolute;
  top: 328px;
  left: 786px;
}

注意：如果需要适配不同尺寸的设备屏幕，不建议直接使用固定px值做绝对定位，可改用vw/vh、百分比等相对单位做适配。

内容的提问来源于stack exchange，提问作者yeah