在开发我的登录页面(使用 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;
`;
一切正常,问题是我看不到线性渐变,所以,我如何使用图像组件但同时使用背景颜色?,因为我唯一能看到的是图像,可悲的是:/
我希望你能帮我解决这个问题。谢谢你的时间 !