应优先使用 rgba() 或 hsla() 控制颜色透明度，避免 opacity 导致子元素被连带变透明；必要时改用伪元素或兄弟结构实现视觉分层。
用 opacity 会让整个元素（包括子元素）一起变透明，这不是你想要的？那得换思路——用 rgba() 或 hsla() 控制背景色/文字色本身的透明度，子元素就不会被连带影响。
opacity 是“整体透明”，无法单独控制子元素
opacity 作用于整个渲染盒子（包括边框、背景、内容、子元素），且会形成层叠上下文，导致 z-index 行为变化。子元素无法通过设置 opacity: 1 来“恢复不透明”——它只是继承了父级的透明效果，再叠加自身透明度，结果更暗更虚。
- 父元素
opacity: 0.6→ 子元素即使写opacity: 1，实际显示仍是 0.6 × 1 = 0.6 - 想让子元素文字清晰、按钮可点击又不发虚？
opacity不适合
用 rgba() 给背景/文字单独加透明，子元素完全不受影响
把原本用 background-color: #000; opacity: 0.3 的写法，改成直接用 rgba(0, 0, 0, 0.3) 设置背景色。alpha 值只作用于该颜色本身，不传染给子元素。
- ✅ 正确：
background-color: rgba(0, 0, 0, 0.3); color: #333;→ 文字保持 100% 不透明 - ✅ 同理可用
color: rgba(255, 100, 50, 0.8)让文字半透但不影响其子节点（比如<span></span>） - ⚠️ 注意：
rgba()只能用于支持它的属性（color、background-color、border-color等），不能用于整个元素
需要局部透明 + 子元素独立控制？拆成兄弟结构或伪元素
如果既要蒙层效果，又要子内容完全不透明且可自由操作（比如弹窗里的表单），别让内容当子元素嵌套在透明容器里——把它提出来，用定位+层级配合伪元素或额外 div 实现视觉上的“覆盖”关系。
立即学习“前端免费学习笔记（深入）”；
- 用
::before伪元素做半透背景，本体元素绝对定位在上层，z-index 更高 - 或者用两个同级 div：
<div class="overlay"></div> <div class="content">…</div>，分别控制 - 这样
.content完全不受透明干扰，还能加阴影、动画、focus 样式等
基本上就这些。记住口诀：要“局部透明”选 rgba/hsla；要“整块雾化”才用 opacity；要“视觉分层但逻辑独立”，就别硬套父子结构。
