使用linear-gradient为图片加遮罩时出现横向线条问题求助

以下是几个可行的修复方案，针对你遇到的渐变遮罩底部出现横向线条的问题：

• 统一渐变色彩的RGB值
  你当前的渐变结束色用了rgba(11,11,11,0)，虽然透明状态下RGB值不影响视觉，但浏览器渲染插值时可能因色彩差异产生异常线条。将结束色的RGB值和起始色统一为(0,0,0)，修改后的代码：

  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  

  （注：现代WebKit内核浏览器已支持标准linear-gradient写法，无需再用旧版-webkit-gradient语法）

• 触发硬件加速优化渲染
  给图片元素添加硬件加速属性，强制浏览器用GPU渲染，避免CPU渲染时的线条bug：

  .your-image-selector {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  

• 添加平滑过渡区间
  在渐变中增加一个接近底部的不透明锚点，让透明度过渡更平缓，减少硬边缘渲染的异常：

  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 90%, rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 90%, rgba(0,0,0,0));
  

这些方案都是针对浏览器渐变遮罩渲染bug的常见修复手段，你可以逐个尝试，一般能解决横向线条问题。

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