React+Tailwind：实现背景图与纯色背景的底部渐变平滑过渡

API 探路者

2026-8-17

实现背景图到灰色背景的平滑渐变过渡

你可以通过两种简单方式实现这个效果，以下是具体实现方案：

方法一：组合背景图与渐变（纯CSS背景层叠）

直接在backgroundImage中同时设置渐变和背景图，让渐变覆盖在背景图底部完成过渡：

<div>
  <div
    className='min-h-screen bg-gray-700 bg-no-repeat pb-10'
    style={{
      // 渐变在上层，背景图在下层
      backgroundImage: `linear-gradient(to bottom, transparent 0%, #374151 100%), url(${settings[0]?.bgImage})`,
      backgroundPosition: 'center, center',
      backgroundSize: '100% 120px, cover',
      backgroundBlendMode: 'normal'
    }}
  >
    {/* 页面内容 */}
  </div>
</div>

说明：

#374151是Tailwind bg-gray-700对应的十六进制颜色值，确保渐变终点和纯色背景完全匹配
backgroundSize的第一个值100% 120px控制渐变的高度（可根据需求调整为100px/150px等），第二个值cover让背景图铺满容器
渐变方向to bottom实现从透明到灰色的过渡，刚好衔接下方的bg-gray-700纯色背景

方法二：使用伪元素遮罩（更贴合Tailwind使用习惯）

给容器添加一个绝对定位的渐变层，覆盖在背景图底部，这种方式无需手动写颜色值，直接用Tailwind类即可：

<div>
  <div
    className='min-h-screen bg-gray-700 bg-no-repeat pb-10 relative'
    style={{
      backgroundImage: `url(${settings[0]?.bgImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    }}
  >
    {/* 底部渐变遮罩 */}
    <div className='absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-700 to-transparent'></div>
    
    {/* 页面内容 */}
  </div>
</div>

说明：