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

Posted

技术标签:

【中文标题】Next.js 以线性渐变为背景的图像组件【英文标题】:Next.js Image component with linear gradient as background 【发布时间】:2021-09-13 18:42:37 【问题描述】:

在我的登陆页面(使用 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"
     
     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;

`;

一切正常,问题是我看不到线性渐变,所以,我如何使用图像组件但同时使用背景颜色?,因为我唯一能看到的是图像可悲的是:/

我希望你能帮助我解决这个问题。感谢您的宝贵时间!

【问题讨论】:

【参考方案1】:

您需要创建另一个 div,将它的 z-index 设置为 1,将位置设置为绝对,宽度和高度为 100%。这样,您的渐变将位于 Next/Image 之上。

<PresentationHero2>
    <div className="radialBackground"></div>
    <Image
     src="/main background img.jpg"
     
     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;

【讨论】:

【参考方案2】:

您可以创建另一个宽度和高度为 100% 的 div 并将背景(线性渐变)放在那里,这样您就可以看到线性渐变和 img 了!

【讨论】:

以上是关于Next.js 以线性渐变为背景的图像组件的主要内容,如果未能解决你的问题,请参考以下文章

将线性透明渐变应用于python中具有透明背景的图像部分

如何用渐变色填充部分背景?

01超精美渐变色动态背景完整示例CSS动效实战(纯CSS与JS动效)

有没有办法在 QML 中设置线性渐变 stepwith

CSS背景渐变

如何用css写渐变色。