如何在CSS中实现向透明过渡的线性渐变（非白色）及DOM适配？

问题本质 #

你之前给paginate-left添加mask-image无效，核心原因是CSS mask仅作用于当前元素及其子元素，无法跨层级影响下层的图片元素。要实现不依赖背景色的图片渐隐效果，必须调整mask的作用对象，或者通过层级覆盖的方式实现遮罩。

最优解决方案（无需重构DOM） #

直接给图片滚动容器.image-scroller添加mask-image，容器内所有图片都会被mask控制，完全适配任意背景色场景：

.image-scroller {
  /* 左右两侧同步添加渐隐效果，可根据需求调整百分比 */
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  /* 兼容webkit内核浏览器（Chrome、Safari等） */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  /* 确保mask覆盖整个容器 */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

自定义调整

• 仅需左侧渐隐：

.image-scroller {
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
}

• 仅需右侧渐隐：

.image-scroller {
  mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
}

原理说明 #

mask-image通过灰度值控制元素透明度：mask中的纯黑区域会完全显示元素，纯白区域会完全隐藏元素，半透明灰色对应元素的半透明状态。这种方式完全脱离背景色限制，完美适配任意背景的场景。

备选方案（保留paginate元素的情况） #

如果必须通过paginate-left/right实现遮罩，可以调整它们的层级和样式，让遮罩层覆盖在图片上方，利用混合模式实现渐隐：

.images {
  position: relative;
  overflow: hidden;
}

.paginate-left, .paginate-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 1;
  /* 用黑色渐变遮罩，结合混合模式"挖空"下层图片 */
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  mix-blend-mode: destination-out;
}

.paginate-left {
  left: 0;
}

.paginate-right {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
}

这个方案通过mix-blend-mode: destination-out让遮罩层的黑色区域隐藏下层图片，实现渐隐效果，同样不依赖背景色。

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