opacity是渲染层操作，不改变样式声明而统一叠加alpha值；子元素透明度=父opacity×子opacity，乘积计算；rgba()仅影响颜色值，不触发合成层，语义清晰且无副作用。
opacity 是渲染层操作，不是颜色属性
它不改变元素的任何样式声明，而是把整个元素（含所有子节点）当作一个图层，在合成阶段统一叠加 alpha 值。子元素的 opacity: 1 只是在这个已经变淡的图层上“尽力画满”，无法恢复原始不透明度——这不是 bug，是浏览器渲染规范强制行为。
子元素透明度 = 父 opacity × 子 opacity
计算方式是乘积，不是覆盖或继承。比如父设 opacity: 0.6，子设 opacity: 1，最终视觉透明度仍是 0.6；若子设 opacity: 0.8，结果就是 0.48。常见错误现象包括：
- 卡片用
opacity: 0.7，里面按钮文字发灰、图标边缘模糊，加opacity: 1无效 - 下拉菜单被父级半透容器遮挡，
z-index失效——因为opacity触发新层叠上下文 -
opacity: 0元素仍占文档流、可聚焦、能响应事件，和display: none完全不同
想背景透、文字不透？锁定 rgba()
rgba() 不是属性，是颜色函数，只影响你塞进去的那个值。它不会传染，也不触发合成层，语义清晰：
- 背景透明：
background-color: rgba(0, 0, 0, 0.2) - 文字微透：
color: rgba(0, 0, 0, 0.9) - alpha 必须是 0–1 小数，
rgba(0, 0, 0, 50%)或rgba(0, 0, 0, 50)都会被忽略，降级为transparent - IE9+ 支持，IE8 及更早需 fallback 到
filter: Alpha(opacity=20)或 1px 半透 PNG
真要整块淡入淡出，得接受副作用
只有模态框遮罩层这类明确需要“内容+背景+边框+阴影一起动”的场景，才该用 opacity 动画。但要注意：
-
transition: background-color对rgba()的 alpha 无效，浏览器根本不认background-color.alpha这种写法 - 大量
opacity动画（如长列表 hover）易引发重绘卡顿，加will-change: opacity或transform: translateZ(0)强制硬件加速 - 别混用
opacity和频繁transform，容易触发渲染抖动
真正难处理的从来不是怎么写，而是什么时候不该写——只要目标不是“整块一起淡”，opacity 就是错的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
