可用background属性叠加多层背景，用逗号分隔，从左到右为底层到顶层，每层用linear-gradient(rgba(), rgba())模拟纯色透明层，并设background-size:100% 100%和no-repeat确保铺满。
可以用 background 属性叠加多层背景，每层用 rgba() 设置颜色和透明度，浏览器会从后往前绘制，实现自然的叠色效果。
多层背景写法：用逗号分隔
CSS 的 background（或 background-image、background-color）支持多层值，用英文逗号分隔，顺序为“底层 → 顶层”。例如：
注意：只有 background-color 本身不支持多层；必须用 background 简写，或配合 background-image: linear-gradient(...) 等生成色块。
- ✅ 正确（用
background简写 + 多个linear-gradient模拟纯色层）：
div {
background:
linear-gradient(to bottom, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)),
linear-gradient(to bottom, rgba(0, 128, 0, 0.4), rgba(0, 128, 0, 0.4)),
linear-gradient(to bottom, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5));
}每层都是 100% 高度的纯色渐变，视觉上等效于三层 rgba 背景叠加。
立即学习“前端免费学习笔记（深入）”；
更简洁的做法：用多个 linear-gradient 占满容器
不用写重复的起止色，直接用单色 linear-gradient(rgba(...), rgba(...)) 并设为相同起止值，或更推荐：
- 用
linear-gradient(rgba(A), rgba(A))—— 起止色相同，就是纯色层 - 所有层都设
background-size: 100% 100%和background-repeat: no-repeat，确保铺满不平铺 - 用
background-position微调某一层偏移（可选）
示例（红→绿→蓝三层半透叠加）：
div {
width: 300px;
height: 200px;
background:
linear-gradient(rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)),
linear-gradient(rgba(0, 200, 0, 0.3), rgba(0, 200, 0, 0.3)),
linear-gradient(rgba(0, 100, 255, 0.4), rgba(0, 100, 255, 0.4));
background-size: 100% 100%;
background-repeat: no-repeat;
}叠加逻辑与注意事项
- 层序：逗号最左边是底层，最右边是顶层 —— 后写的盖在先写的上面
- 透明度叠加不是简单相加：rgba(255,0,0,0.5) 上再叠 rgba(0,0,255,0.5)，最终呈现的是混合色（偏紫），且整体更不透明
- 若需精确控制某层是否“透出下层”，优先调低该层 alpha 值（如 0.1～0.3），避免全 opaque
- 不能混用
background-color多值（语法错误），必须统一用background或background-image
替代方案：伪元素模拟多层背景
如果逻辑复杂或需独立定位/动画，可用 ::before 和 ::after 分层：
div {
position: relative;
background: #fff; /* 底色 */
}
div::before,
div::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
background-color: rgba(255, 0, 0, 0.2);
z-index: 1;
}
div::after {
background-color: rgba(0, 128, 0, 0.25);
z-index: 2;
}这种方式更灵活，每层可单独设置 z-index、transform、animation 等。
