答案：通过CSS background属性用逗号分隔多层背景，前层在上后层在下，每层可独立设置图片、颜色、渐变、定位、尺寸和重复方式，常用于装饰图标、文字遮罩、视差滚动和提升文字可读性。
使用CSS实现多层背景叠加效果，可以通过 background 属性或其简写形式来同时设置多个背景图层。每一层可以包含图片、颜色、渐变，并支持独立的定位、尺寸和重复方式。
1. 使用 background 简写属性叠加多层背景
将多个背景定义用逗号分隔，写在同一个 background 或 background-image 属性中。层叠顺序为：前面的图层在上，后面的在下（最底层通常是背景色）。
.multi-bg {
background:
url(‘top-layer.png’) top left no-repeat,
url(‘middle-layer.jpg’) center repeat-x,
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8)),
url(‘bottom-pattern.png’) bottom right repeat,
#333;
}
上面例子包含四层图像加一个渐变和基础色，从上到下依次渲染。
2. 控制每层的显示属性
每一层都可以单独设置以下子属性：
立即学习“前端免费学习笔记（深入）”；
- background-image：图片或渐变
- background-position：定位位置
- background-size：尺寸（如 cover、contain 或具体宽高）
- background-repeat：是否平铺
- background-attachment：是否随滚动（fixed 可实现视差）
这些可以在简写中统一设置，也可以拆分为多行增强可读性：
.multi-bg {
background-image:
url(‘overlay.png’),
url(‘content-bg.jpg’),
url(‘pattern-tile.png’);
background-position:
top right,
center,
bottom left;
background-size:
auto,
cover,
200px;
background-repeat: no-repeat, no-repeat, repeat;
}
3. 常见应用场景
多层背景适合用于：
- 给内容区域添加装饰性边角图标（不干扰布局）
- 实现图文叠加的文字遮罩效果
- 创建视差滚动中的多层背景（配合 background-attachment: fixed）
- 用渐变覆盖图片以提升文字可读性
例如，让文字更清晰：
.hero {
background:
linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url(‘hero-bg.jpg’) center/cover no-repeat;
color: white;
} 基本上就这些。只要注意层的顺序和各属性对应关系，就能灵活构建丰富的视觉层次。