所以我有一个图像(链接到图像=> 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 库可以帮助我实现这一点,那也可以。
附注。我项目中的背景是动态的(渐变颜色每隔几秒变化一次)
答案 0 :(得分:2)
这就是掩码的目的:
.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>