1

我想使用 Image 组件设置背景图像并在其上设置线性渐变。到目前为止，没有运气。我尝试简单地将 alinear-gradient作为图像组件的背景。将 Image 组件放入 adiv并在其上放置 a linear-gradient。最后是下面的代码。

<div className="hero-image-container">
            <div className="bg-image-filter" />
            <div className="bg-image">
              <Image
                alt="Background"
                className="hero-image"
                layout="fill"
                objectFit="cover"
                src={image}
              />
            </div>
          </div>
<style jsx>{`
        .bg-image {
          z-index: -10;
        }
        .bg-image-filter {
          z-index: 10;
          background: linear-gradient(
            to right bottom,
            rgba(90, 76, 16, 0.6),
            rgba(20, 81, 116, 0.3)
          );
          object-fit: cover;
        }
        .hero {
          min-height: 85vh;
        }
        .hero-image-container {
          height: 85vh;
          width: 100vw;
          position: absolute;
          z-index: 0;
        }
        .hero-image {
          position: relative; !important
        }
      `}</style>

当然，我可以得到linear-gradient无图像的工作。问题可能是这打破了组件的优化范式。或者我可能只是不知道我在做什么。有什么想法吗？

注意：我知道有人发布了一个类似的问题，但它已被放弃而没有答案。

4

0 回答 0