应避免使用opacity，改用rgba或hsla设置背景、文字、边框等颜色的透明度；若必须用opacity，则需拆分DOM结构，将背景与内容设为同级元素并定位重叠。
直接用 opacity 会让整个元素及其所有子元素一起变透明，这是它的固有行为，无法单独“屏蔽”子元素。想让父容器有透明效果但子元素保持不透明，核心思路是：**避免使用 opacity，改用支持透明度的颜色值（如 rgba、hsla）来设置背景或文字色**。
只给背景加透明，不影响子元素内容
这是最常见也最推荐的做法。把原本写在 background-color 上的纯色（比如 #000 或 black），换成带 alpha 通道的 rgba() 值：
-
错误写法（整块连同文字一起变淡）：
div { background: #000; opacity: 0.7; } -
正确写法（仅背景半透，文字清晰）：
div { background: rgba(0, 0, 0, 0.7); }
文字或边框需要半透明？也优先用 rgba/hsla
如果目标是让文字、边框等局部透明，同样不要依赖 opacity，而是直接用支持透明度的颜色函数：
- 文字半透：
color: rgba(255, 255, 255, 0.8); - 边框半透：
border: 1px solid rgba(100, 100, 100, 0.4); - 渐变中用 rgba：
background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.5));
特殊情况：必须用 opacity？那就调整 DOM 结构
极少数场景（比如要对带阴影、变换的整块做淡入淡出动画），可能仍需 opacity。这时应把需要保持不透明的子元素移出该容器，用定位等方式视觉上“叠”上去：
立即学习“前端免费学习笔记（深入）”；
- 把背景层和内容层拆成两个同级兄弟元素
- 用
position: absolute或flex布局让它们重叠 - 只对背景层设
opacity，内容层完全不受影响
注意兼容性与可维护性
rgba 和 hsla 在所有现代浏览器中早已完全支持（包括 IE9+）。比起 hack 式的结构拆分，用颜色函数更简洁、语义清晰，也方便后期调整——改一个数值就能同时控制色相和透明度，不用反复调 opacity 和 z-index。
