css多重背景按声明顺序从上到下堆叠，先写的在最上层；通过逗号分隔多个背景值（颜色、图片、渐变），可独立设置background-size、position和repeat；示例中线性渐变叠加背景图增强文字可读性，或多层渐变营造层次感，配合background-blend-mode实现自然融合。
在 CSS 中，你可以通过 多重背景 实现渐变叠加多层背景效果。浏览器会按照声明顺序从上到下堆叠背景：最先写的背景在最上面，最后写的在最底层。
语法结构
CSS 允许你用逗号分隔多个背景值，包括颜色、图片和渐变。每个背景可以包含渐变、图像或纯色，并支持独立的 background-size、background-position 和 background-repeat 设置。
示例：渐变叠加图片背景
你想在一个背景图上叠加一个线性渐变，使文字更清晰可读：
立即学习“前端免费学习笔记（深入）”；
.overlay-gradient { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), /* 上层：从半透明黑到深黑的渐变 */ url('bg-image.jpg'); /* 下层：实际背景图 */ background-size: cover; background-position: center; background-repeat: no-repeat; height: 400px; color: white; display: flex; align-items: center; justify-content: center; }
这里，黑色透明渐变覆盖在图片之上，增强文字对比度。
叠加多个渐变
你也可以叠加多个渐变，比如创建光影或纹理效果：
.multiple-gradients { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 0, 0.4), transparent 20%), /* 黄色光斑 */ linear-gradient(135deg, transparent, rgba(0, 0, 255, 0.2)), /* 蓝色调斜向渐变 */ linear-gradient(to bottom, #ff7a7a, #d64545); /* 底层主渐变：红粉色系 */ height: 400px; background-size: cover; }
这个例子中，三个渐变叠加营造出有层次感的视觉效果。
实用技巧
- 确保渐变写在前面，如果你希望它覆盖在图片或其他背景之上。
- 使用
rgba()或hsla()控制颜色透明度，让底层内容透出来。 - 配合
background-blend-mode可以实现混合模式（如 multiply、overlay），创造更丰富的色彩融合。
示例：使用 blend mode 混合渐变与图像
.blend-mode-example { background: linear-gradient(to top, #333, transparent), url('landscape.jpg'); background-blend-mode: overlay; /* 让渐变与图片融合得更自然 */ background-size: cover; height: 300px; }
基本上就这些。只要掌握书写顺序和透明度控制，就能灵活实现各种渐变叠加背景效果。