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允许您使用Image组件进行优化，我尝试以这种方式将相同的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索引设置为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>