如何在 CSS 中做一个渐变为透明而不是白色的线性渐变？

Question

我目前将其作为渐变：

background: linear-gradient(
  to right,
  rgba(var(--white-rgb), 1) 0%,
  rgba(var(--white-rgb), 0) 100%
);

这样，左侧会褪色为纯白色，右侧会褪色为透明。如果您有左侧分页的图像，那么它看起来像这样：

这里的图像是深灰色的（可以是任何图像，这只是一个占位符），内容背景的颜色根据分页图像滚动条的使用位置而不同（在本例中它是浅灰色，但也可以是绿色，红色、蓝色或其他未知颜色）。我们最初的背景始终是白色的，因此淡入纯白色是有意义的。但现在看来不太对劲。

如何在左侧说“将底层内容淡化为透明”？基本上，从右侧的透明渐变开始，然后将左侧的背景内容淡化为透明。这样的事可能吗？

否则，我可能需要告诉渐变在每种随机情况下背景颜色要淡入什么颜色，这可能需要一些大量的重构，所以想知道我是否可以避免走这条路。

ChatGPT 说试试这个：

mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%, /* Fully transparent on the left */
  rgba(0, 0, 0, 1) 100% /* Fully opaque on the right */
);

但这不起作用，我的 DOM 结构是这样的：

<div class="images">
  <div class="image-scroller">
    <div class="image-container">
      <img src="..."/>
    </div>
    <div class="image-container">
      <img src="..."/>
    </div>
    <!-- more -->
  <div>
  <div class="paginate-left"></div>
  <div class="paginate-right"></div>
</div>

我会在

paginate-left

上添加该遮罩，但它不适用于其下方的

<img>

方式。

Answer 1

相对较新的属性

mask-image

mdn 允许您定义一个图像，其 alpha 通道（不透明度）将用于遮盖其所应用的元素。该图像可以是渐变的。

body {
  background: green;
}

img {
  display: block;
  border: 1px solid black;
  width: 200px;
  height: 200px;
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

<img src="https://picsum.photos/200" alt="an image">