background-color 不支持透明叠加，需用 rgba() 或 hsla() 设置 alpha 通道；多层背景须用 background 层叠语法，伪元素叠加需配合 position 和 z-index 控制。
background-color 本身不支持透明叠加，必须用 rgba() 或 hsla()
纯 background-color: #ff0000 是不透明的，后设的背景会完全盖住前一个；所谓“颜色重叠透明显示”，本质是让某个背景色自带 alpha 通道，从而透出下层内容。浏览器渲染时，每个元素的 background-color 是独立绘制的，不会自动混合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
rgba(255, 0, 0, 0.5)替代#ff0000，第四个参数是透明度（0–1） - 避免写
background-color: red; opacity: 0.5——这会让整个元素（含子内容）都变透明，不是仅背景透 - 如果需要兼容 IE8 及更早版本，
rgba()不生效，得 fallback 到半透 PNG 图片或滤镜（但现代项目基本可忽略）
多层 background-color 叠加：用 background 层叠语法，而非多个 background-color
CSS 不允许一个元素写多个 background-color 声明，后写的会覆盖前写的。真要实现“两层颜色叠加透出”，得用 background 的逗号分隔多层语法，把颜色当图层来排布。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
background: rgba(255, 0, 0, 0.3), linear-gradient(to right, #000, transparent);—— 第一层是半透红，第二层是渐变，底层内容从透明区透出 - 层序是从后往前画：最后写的在最底层，最先写的在最上层（和 Photoshop 图层顺序相反）
- 所有层共享同一块渲染区域，所以必须至少有一层带透明/渐变/图片，否则上层完全遮死下层
伪元素叠加颜色时，z-index 和 position 是关键控制点
想让一个半透色块“浮”在内容上方又不干扰交互，常用 ::before 或 ::after。但这不是自动生效的——默认伪元素没有尺寸、没有定位、z-index 无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须设
position: absolute（或fixed），再配top/left/right/bottom: 0撑满父容器 - 加上
z-index: 1（或更高），确保它压在内容上、但不挡住父级其他兄弟元素 - 别忘了
content: ""，否则伪元素不渲染；也别漏background-color: rgba(...) - 如果父容器没设
position: relative，伪元素的absolute会相对于最近有定位的祖先，容易错位
mix-blend-mode 能做颜色混合，但和 background-color 叠加不是一回事
有人试 mix-blend-mode: multiply 想让两个 background-color 自动调色，结果没反应——因为 mix-blend-mode 作用于**元素自身内容与背底之间的混合**，不是两个背景层之间混合。它对纯色背景 + 纯色背景无效，除非其中一个是图片或有文字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要用
mix-blend-mode，至少一层得是图片、渐变或带文字的内容区域 - 它受父容器
isolation: isolate影响，不加可能被外层剪裁或失效 - 性能上比纯
rgba()开销大，尤其动画中频繁触发重绘时，慎用于高频交互区域
opacity 就能局部透明，或者反复写多个 background-color 期待叠加——这两条路在 CSS 里根本走不通。真正可控的方式就两条：用带 alpha 的颜色值，或者用伪元素+定位手动叠一层。其余都是绕远路。 
