opacity 作用于整个渲染盒并逐层相乘，不继承但影响子元素视觉效果；rgba() 可实现局部透明且不传染；祖先链上的 opacity 常被忽略，需逐层检查 computed styles。
因为 opacity 不是颜色属性，而是对整个渲染盒（painting box）做 Alpha 混合——它把父元素及其所有子元素当做一个整体图层，在合成阶段统一压暗，子元素无法“逃出来”。
opacity 的透明度是乘法叠加，不是覆盖或继承
浏览器渲染时，opacity 值会逐层相乘：父级 opacity: 0.6 × 子级 opacity: 1 = 最终 0.6。这不是样式被“继承”，而是像素值在 GPU 合成阶段已被固定衰减。
- 你在 DevTools 的 Computed 面板里看到子元素的
color计算值变成rgba(0, 0, 0, 0.6)，但源码写的是#000，这就是证据 -
opacity: 0的元素仍占文档流、可聚焦、能响应click，和display: none完全不同 - 它会强制触发新层叠上下文，可能让
z-index行为意外失效（比如下拉菜单被遮住）
想只让背景透、文字保持清晰？用 rgba() 替代 background-color
把原来两行写法：
background-color: #000;<br>opacity: 0.6;
换成一行：
background-color: rgba(0, 0, 0, 0.6);
rgba() 只作用于颜色本身，不传染给子元素，也不影响边框、阴影、文字清晰度。
- alpha 必须是 0–1 小数：
rgba(0, 0, 0, 60%)或rgba(0, 0, 0, 60)会被浏览器忽略 - 渐变中要用
transparent，别用rgba(0, 0, 0, 0)，旧版 Safari 可能误解析为黑色 - 文字局部半透？直接写
color: rgba(0, 0, 0, 0.8)，别碰父级opacity
祖先链上的 opacity 最容易被忽略
你没给当前父元素写 opacity，但子元素还是发灰？大概率是某个隐藏祖先（比如 .modal-overlay、.page-wrapper 或 body 下某层 div）悄悄加了 opacity: 0.7，或者用了 backdrop-filter 配合半透背景。
- 这种影响是穿透式的，查起来得一层层往上 inspect computed styles
- 重点盯
opacity和filter的生效位置，比盲目改rgba()更省时间 - 伪元素（
::before）或兄弟结构（同级div）才是真正在视觉和逻辑上隔离透明的解法
真正要调的不是“怎么让子元素变回来”，而是“谁在透”——很多时候问题不在你写的那行 CSS，而在 DOM 树更上方某个没注意的 wrapper 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
