Next.js 以线性渐变为背景的图像组件

Question

在开发我的登陆页面（使用 next.js ）时，我决定使用这行代码作为一个部分的背景。

background-image: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87)), url("/main background img.jpg");

但是，由于next.js允许您使用图像组件进行优化，所以我尝试以这种方式放置相同的img作为背景

<PresentationHero2>
    {/* Background */}
    <Image
     src="/main background img.jpg"
     alt=""
     layout="fill"
     objectFit="cover"
     />
</PresentationHero2>

样式（带有样式组件）

export const PresentationHero2 = styles.div`

position: relative;

width: 100%;
height: 663px;
 
background: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255, 0.87));

display: flex; 
align-items: center;
justify-content: center;

overflow: hidden;

`;

一切工作正常，问题是我看不到线性渐变，那么，我如何使用图像组件但同时使用背景颜色？因为我唯一能看到的就是图像： /

我希望你能帮助我。感谢您的宝贵时间！

Answer 1

您需要创建另一个 div，将其 z-index 设置为 1，将位置设置为绝对，宽度和高度均为 100%。这样，您的渐变将位于下一个/图像的顶部。

<PresentationHero2>
    <div className="radialBackground"></div>
    <Image
     src="/main background img.jpg"
     alt=""
     layout="fill"
     objectFit="cover"
     className="bgImage"
     />
</PresentationHero2>

.radialContainer{
  z-index: 1;
  position: absolute;
  height: 100%;
  width:100%;
  background: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123, 8, 255,0.87));
}
.bgImage{
  z-index: 0;
}

Answer 2

您可以创建另一个宽度和高度为100％的div并将背景（线性渐变）放在那里，这样您就可以看到线性渐变和img！

Answer 3

对于带有 Tailwind CSS 的 NexJS 13 图像组件

<div className="relative overflow-hidden w-64 h-64">
  <Image
  src={backgroundImage}
  alt={alt}
  fill
  className="object-cover w-full h-full bg-[linear-gradient(0deg,rgba(0,0,0,0.75)_6.82%,rgba(0,0,0,0.00)_81.44%)]"
  />
  <div className="absolute w-full h-full bg-[linear-gradient(0deg,rgba(0,0,0,0.75)_6.82%,rgba(0,0,0,0.00)_81.44%)]" /></div>
</div>