如何创建顶部不透明度为 100%，底部不透明度为 0% 的渐变图像？

Question

所以我有一个图像（链接到图像=> https://i.imgur.com/TRTg8Cu.jpg），它下面有一个渐变（身体的背景）。 目前，图像具有渐变为黑色的渐变，但我希望图像渐变为给定的渐变。

基本上，一种让图像从顶部不透明度 100% 到底部不透明度 0% 的方法。

// HTML
<div className="h-screen w-full gradient-bg hero-image z-10>
        <Image
            src={event.name_image.url}
            alt={event.Name}
            layout="fill"
            className="bg-top bg-cover object-cover"
          />
</div>

// CSS
.gradient-bg div {
  position: relative;
  display: inline-block;
}
.gradient-bg div:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 100%
  );
}

如果有其他方法可以实现相同的效果，使图像淡入背景，那也可以。 如果有一个 JS/React 库可以帮助我实现这一点，那也可以。

附言。我的项目中的背景是动态的（渐变颜色每隔几秒改变一次）

Answer 1

这就是掩码的目的：

.gradient-bg {
  background: linear-gradient(to right, red, blue);
  display:inline-block;
}

.gradient-bg img {
  -webkit-mask: linear-gradient(white 50%, transparent);
  display:block;
}

<div class="gradient-bg">
  <img src="https://picsum.photos/id/1/400/300">
</div>