Next.js添加CSS线性渐变后背景图片不显示问题求助

核心原因 #

你遇到的问题是完全不透明的线性渐变层覆盖了背景图片：

• CSS中背景层的渲染顺序是「先写的在上层」，你把渐变放在了图片前面
• 你的渐变是纯黑到纯白的完全不透明过渡，直接把下层的背景图片完全遮挡，所以看不到图片

修复方案 #

给渐变颜色添加透明度，让下层的图片可以透出来，同时保留渐变效果。修改后的代码如下：

<div className="hero" style={{
  background: "linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.3)), url('/agent2.png')",
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat'
}}>
  <div className="hero-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <Navigation />
  </div>
</div>

补充说明 #

• 你可以通过调整rgba的第四个参数（透明度，范围0-1）来控制渐变的深浅，数值越大越不透明
• 也可以改用backgroundImage属性单独声明渐变和图片，效果完全一致，写法如下：

style={{
  backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.3)), url('/agent2.png')",
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat'
}}

内容的提问来源于stack exchange，提问作者Max Kodi