多层rgba背景必须用background简写配合多个linear-gradient()实现，底层→顶层顺序书写，末尾渐变覆盖前面；错误使用background-color会导致多值被忽略。
background 用多个 linear-gradient() 模拟多层 RGBA 背景
纯 background-color 不支持多层，必须用 background 简写属性配合多个 linear-gradient() 实现。每层用 rgba() 定义颜色和透明度，逗号分隔，顺序是“底层 → 顶层”。
常见错误现象：写成 background-color: rgba(255,0,0,0.3), rgba(0,255,0,0.4) —— 浏览器直接忽略第二项，只取第一个值。
- 正确写法必须是
background: linear-gradient(...), linear-gradient(...) - 每层都推荐用相同起止色，例如
linear-gradient(rgba(255,0,0,0.2), rgba(255,0,0,0.2))，视觉上就是纯色层 - 加上
background-size: 100% 100%和background-repeat: no-repeat，避免意外平铺或拉伸
层序与叠加逻辑：为什么最右边的层看起来“最上面”
CSS 渲染时按逗号分隔的顺序从后往前绘制，即列表末尾的渐变覆盖在前面所有层之上。这不是 z-index，而是绘制栈顺序。
容易踩的坑：以为 alpha 值相加就等于总透明度。实际是加权混合：result = fg × α + bg × (1 − α)。比如 rgba(0,0,0,0.5) 盖在 rgba(255,0,0,0.5) 上，结果不是 1.0 的不透明黑红混合，而是偏灰紫、整体更“闷”的中间色。
- 若想某层明显透出下层，优先把它的 alpha 设低（如
0.1–0.3），别盲目叠高 alpha 层 - 父容器没设背景色时，底层会和默认白色画布混合，调试时务必确认父级
background-color - Chrome DevTools 颜色拾取器显示的是最终合成色，不是你写的原始
rgba()，别照着它反推参数
替代方案：background-blend-mode 更可控
当目标是让两层半透色产生可预测的混合效果（比如深底色 + 浅蒙层），硬叠 rgba() 很容易发灰、失饱和。这时改用 background-blend-mode 把颜色和透明度解耦更稳妥。
示例：一层纯色背景 + 一层半透渐变遮罩：
div {
background:
linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)),
#3498db;
background-blend-mode: multiply;
background-size: 100% 100%, auto;
background-repeat: no-repeat, no-repeat;
}
-
multiply、overlay、screen等模式比单纯叠 alpha 更易控明暗与对比 - 注意兼容性：
background-blend-mode在 Safari 8+、Chrome 35+、Firefox 30+ 支持，IE 全线不支持 - 不能和
opacity混用——后者会让整个元素（含子内容）变透明，违背“只调背景”初衷
别用 opacity 替代 rgba()
给容器设 opacity: 0.7 是最常见误操作。它会让文字、边框、子元素全部变透明，完全失去“背景透而内容实”的设计意图。
真正需要的是背景色本身的透明通道，所以必须用 rgba() 或 hsla() 声明 background-color，或用 linear-gradient() 构造背景层。
- 文字颜色请始终用纯色（如
#222、hsl(0,0%,15%)），别用rgba()去“补偿”背景透明——叠加计算会导致对比度崩坏 - 深色模式适配时，建议用 CSS 变量控制
rgba()的 r/g/b 值，alpha 单独抽离，方便统一调节 - 移动端 iOS Safari 对多层
background支持良好，但旧安卓 WebView（如 Android 4.4）可能渲染异常，上线前务必真机验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
