移动端背景图白线解决方案

为什么会有这条线？

一句话：浏览器计算像素时四舍五入，背景图比容器小了1px，底层颜色就露出来了。

100vh在不同设备上换算成整数像素后，再配合 background-size: cover，边缘误差就这么产生了。

常见三种解决方案

第一种方案：加背景色（最推荐）

.bg {
  background-color: #000; /* 和图片边缘颜色一致 */
  background-image: url('bg.jpg');
  background-size: cover;
}

能解决90%的问题，因为露出来的就是背景色。

第二种方案：稍微放大一点

.bg {
  background-image: url('bg.jpg');
  background-size: calc(100% + 2px) calc(100% + 2px);
  background-position: center;
}

放大2px让图覆盖边缘，瑕疵直接被裁掉。

第三种方案：伪元素兜底（终极方案）

.bg {
  position: relative;
  overflow: hidden;
}
.bg::before {
  content: '';
  position: absolute;
  inset: -2px; /* 四边各扩大2px */
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

让背景独立于容器之外，物理上杜绝缝隙。