如何在Next.js Image组件上方叠加linear-gradient线性渐变效果

AI 小北

2026-9-27

Next.js Image组件叠加渐变遮罩的解决方法

现有代码问题

渐变层.bg-image-filter未设置定位和宽高，默认静态定位下没有实际渲染尺寸，无法覆盖在图片上方，object-fit属性对普通div无效，无需设置
图片容器.bg-image未设置非静态定位，不符合Next.js Image组件layout="fill"要求父元素为定位元素的规则，导致图片布局异常
手动给Image组件设置position: relative !important破坏了layout="fill默认的绝对定位填充逻辑
负z-index设置会引发父容器层级上下文错乱，无需使用负层级

修正后代码

<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>{`
  .hero-image-container {
    height: 85vh;
    width: 100vw;
    position: absolute;
    z-index: 0;
    overflow: hidden;
  }
  .bg-image-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: linear-gradient(
      to right bottom,
      rgba(90, 76, 16, 0.6),
      rgba(20, 81, 116, 0.3)
    );
  }
  .bg-image {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .hero {
    min-height: 85vh;
  }
`}</style>