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;
}这里，黑色透明渐变覆盖在图片之上，增强文字对比度。
中网景企业网站源码时尚版
下载
中网景企业网站源码时尚版CNK073免费版下载概述：1.任意添加频道/栏目及下级栏目2.各种频道/栏目菜单显示风格，可显示多级弹出级联菜单3.多种产品级别显示风格菜单，产品级别可无限级层分类4.方便变换风格，更利于搜索引擎的搜索5.有各行业风格、韩国风格、欧美风格等提供选择（在官方网选择）一、界面模板丰富多彩，精美1. 中网景提供丰富精美的各款式风格的网站界面模板让您选择，让你方便快捷拥有精美而功
叠加多个渐变
你也可以叠加多个渐变，比如创建光影或纹理效果：
.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;
}基本上就这些。只要掌握书写顺序和透明度控制，就能灵活实现各种渐变叠加背景效果。
