SVG背景图缩放异常：伪元素背景SVG半像素线故障

你碰到的这个半像素线问题，其实是响应式缩放SVG背景时常见的亚像素渲染偏差导致的——当用background-size: cover或contain缩放SVG时，浏览器为了平滑边缘会做抗锯齿处理，这就容易让下方的红色条带透过细微的缝隙露出来。下面给你几个实用的解决方案：

方案1：修改SVG本身，从根源消除缝隙 #

最彻底的办法是调整你的白色三角形SVG，让它的边缘稍微超出原始尺寸（比如向外扩展1px）。这样即使缩放时出现亚像素偏移，扩展的部分也能完全覆盖住下方的红色条带，不会露出线条。

你可以直接编辑SVG的path元素，把路径坐标稍微向外调整一点；或者给SVG添加一个和三角形同色的细微描边（stroke: white; stroke-width: 1px），确保边缘没有留白。

方案2：用transform缩放代替background-size #

放弃background-size，把SVG作为伪元素的content直接插入，然后用transform: scale()实现响应式缩放，同时指定transform-origin保证像素对齐：

#careers {
  margin: 7em 0 0;
}
#careers a {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: block;
  position: relative; /* 作为伪元素的定位容器 */
  -webkit-box-shadow: 7px 1px 10px rgba(0,0,0,0.1);
  box-shadow: 7px 1px 10px rgba(0,0,0,0.1);
  /* 你的红色条带背景样式 */
  background-color: #ff0000;
}
#careers a:before {
  content: url('你的白色三角形.svg');
  position: absolute;
  top: 0;
  left: 0;
  /* 根据需求调整缩放比例，也可以用媒体查询适配不同屏幕 */
  transform: scale(1);
  transform-origin: 0 0; /* 从左上角开始缩放，避免偏移 */
}

方案3：用CSS绘制三角形替代SVG #

如果你的三角形样式不复杂，完全可以用CSS border来绘制，这种方式不会有任何缩放问题，响应式适配也更灵活：

#careers a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* 用border绘制白色三角形，尺寸支持百分比/vw等响应式单位 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 100vw;
  border-color: transparent transparent #ffffff transparent;
}

方案4：细微偏移隐藏半像素线 #

如果上面的方法都不想用，可以给伪元素加一点细微的位置偏移，把半像素线直接隐藏：

#careers a:before {
  background: url('你的三角形.svg') no-repeat;
  background-size: cover;
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

通过让伪元素稍微放大一点并向上向左偏移，把可能出现的半像素线覆盖或隐藏在容器外。

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