rgba() 和 opacity 透明机制不同：前者在颜色级注入 alpha 并逐像素 alpha 混合，后者在图层渲染级统一衰减所有内容且嵌套时 alpha 相乘；mix-blend-mode 则是像素级混合运算，依赖底层已渲染内容。
rgba() 和 opacity 都能“让颜色变透”，但它们根本不在同一层参与合成——前者在颜色属性级注入 alpha，后者在渲染图层级压低整个元素的输出透明度。想精准控制叠加结果，必须从渲染顺序和合成时机切入。
rgba() 叠加不是颜色相加，而是逐层 Alpha 混合
浏览器对重叠的 rgba() 元素不执行“取平均”或“RGB 相加”，而是严格按公式：result = foreground × alpha + background × (1 − alpha) 逐像素计算。这个过程有方向性：上层决定“自己显多少、让下层露多少”，下层只提供被采样的内容。
- 两层
rgba(0,0,0,0.2)堆叠，视觉灰度≈rgba(0,0,0,0.36)（不是0.4），因为第二层混合的是第一层已合成的结果 - 上层
rgba(255,0,0,0.3)盖在下层rgba(0,0,255,0.8)上，最终红色占比仅 30%，蓝色实际贡献为0.7 × 0.8 = 0.56（即原始蓝色的 56%） - 若父容器背景未显式声明（比如是
transparent或未设色），叠加会默认与画布白色混合，导致颜色发灰、偏亮——务必用开发者工具的拾色器点选验证真实值，别信直觉
opacity 嵌套会触发乘积效应，破坏可读性
opacity 修改的是整个元素的 stacking context 输出 alpha，它不区分背景、文字、边框或子元素，一律按比例衰减。嵌套时，alpha 值相乘而非相加。
- 外层
opacity: 0.5+ 内层opacity: 0.5→ 实际文字透明度为0.25，按钮点击区域也变淡，可读性和交互性双双崩坏 -
opacity无法单独作用于背景；若你只想让遮罩层透、文字保持清晰，必须用background-color: rgba(0,0,0,0.6)，而不是opacity: 0.6 - 动画场景下
opacity仍可安全使用（如淡入模态框），但要确保其内部关键内容（如关闭按钮、输入框）未被意外继承透明度——必要时用opacity: 1显式重置
mix-blend-mode 不是透明度，而是像素级混合运算
mix-blend-mode 让元素内容与其背后**已渲染完成的内容**（父背景、背景图、兄弟元素）按算法混合，它不改变自身 alpha，但会彻底改写视觉输出。前提是：该元素不能有完全不透明的背景遮挡底层。
- 设
mix-blend-mode: multiply的白色文字，在浅色图上几乎不可见（白 × 浅色 ≈ 浅色），在深色图上才显现——这是预期行为，不是 bug - 若父容器设了
isolation: isolate，子元素将只能跟父容器内容混合，无法穿透到更外层背景；调试时先检查是否误加了该声明 - 要实现标题融入背景图的效果，必须同时满足三个条件：文字无背景色（
background-color: transparent）、父容器有可见背景、且未被isolation隔离
多层背景叠加请用 background 层叠语法，别堆多个 background-color
CSS 不允许一个元素写多个 background-color，后声明会直接覆盖前声明。真要模拟“颜色+渐变+图片”多层透出，必须用 background 的逗号分隔语法。
- 写法示例：
background: rgba(0,0,0,0.3), linear-gradient(to right, transparent, #fff);—— 注意层序：**最后写的在最底层，最先写的在最上层**（和 Photoshop 相反） - 所有层共享同一渲染区域，所以至少有一层需含透明/渐变/图片，否则上层完全遮死下层
- 伪元素（
::before/::after）做叠加层时，必须显式设置position: absolute和z-index，否则默认无尺寸、无定位、z-index 无效
transform 触发新图层、甚至 will-change 的副作用）都可能打断预期的混合链。调试时优先打开 DevTools 的“Layers”面板，确认图层拆分是否符合预期，比反复改 CSS 更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
