应避免用 opacity 控制背景或局部透明，因其会使整个渲染盒（含文字、边框、子元素）整体变淡且不可逆；推荐用 rgba() 设置背景色、边框色或文字色实现仅目标元素透明，或用 ::before 伪元素隔离复杂背景。
别用 opacity 控制背景或局部透明——它会让整个渲染盒（包括文字、边框、所有子元素）一起变淡，子元素写 opacity: 1 也拉不回来。
为什么 opacity 会让子元素“逃不掉”
opacity 不是颜色属性，而是对整个 painting box 做 Alpha 混合。它不是继承，而是底层绘制时把父元素及其全部后代当作一个整体压暗。比如父级 opacity: 0.4，里面一个按钮写了 opacity: 1，最终显示的不透明度仍是 0.4 × 1 = 0.4。
常见现象包括：
- 文字发灰、对比度下降，Inspector 里看到计算出的
color是rgba(0,0,0,0.4)而非你写的#000 - 图标边缘模糊、按钮点击反馈变弱
- 子元素明明没设
opacity，却跟着变透——大概率是某个祖先元素（比如.modal-overlay或 body 的 wrapper）悄悄加了opacity或backdrop-filter
用 rgba() 替代 background-color 实现仅背景透明
这是最常用、兼容性好（IE9+）、语义清晰的解法：alpha 值只作用于颜色本身，不传染给子元素。
- 把
background-color: #000; opacity: 0.6;改成background-color: rgba(0, 0, 0, 0.6); - 渐变中需要透明段，用
transparent，别用rgba(0,0,0,0)——后者在旧浏览器可能被解析为黑色 - 边框或文字也要局部透明？直接写
border-color: rgba(100, 100, 100, 0.3)或color: rgba(0, 0, 0, 0.8) - 避免
rgba(0,0,0,0.6) !important这类冗余写法，!important对 alpha 值毫无意义
复杂背景时用 ::before 伪元素隔离
当背景是 background-image + blur() + 半透叠加，或需动态切换透明度又不想改 DOM 结构时，伪元素是最稳妥的视觉分层方案。
- 父容器设
position: relative -
::before设position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; - 确保真实内容的
z-index> 1，且不设opacity - 伪元素默认不占文档流，但必须显式设置宽高才能覆盖全区域
真正在意的不是“怎么写”，而是“谁在透”
很多情况下你没写 opacity，但子元素还是发灰——问题往往不在当前元素，而在祖先链上某一层（比如全局遮罩层或 layout wrapper）悄悄加了 opacity，或用了 backdrop-filter: blur(4px) 配合半透背景。这种影响是穿透式的，Inspector 里不一定一眼看出。查的时候得往上逐层 inspect computed styles，重点盯 opacity 和 filter 的生效位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
