应使用rgba()、hsla()或transparent设置背景透明，避免opacity影响子元素；复杂场景可用伪元素遮罩分离背景与内容层。
opacity 会让整个元素及其子元素一起变透明
直接给父元素设置 opacity: 0.5，子元素（比如文字、按钮、图标）会跟着一起变淡，这不是你想要的“仅背景透明”。这是因为 opacity 作用于整个渲染盒（rendering box），不可继承但会向下传递透明效果。
用 rgba() 或 hsla() 设置背景色透明，不干扰子元素
把原本写在 background-color 上的纯色，换成带 alpha 通道的颜色值：
-
background-color: rgba(0, 0, 0, 0.3)—— 黑色背景，30% 不透明（即 70% 透明） -
background-color: hsla(200, 100%, 50%, 0.2)—— 蓝绿色背景，80% 透明 - 注意：不要写成
rgba(0, 0, 0, 0.3) !important这类冗余写法，alpha 值本身已足够控制透明度
遇到渐变背景时，用 transparent 替代 rgba(0,0,0,0)
写线性渐变时，如果想让某一段完全透明，别用 rgba(0,0,0,0)，它在部分旧浏览器里可能被解析为黑色。直接用关键字 transparent 更稳妥：
background: linear-gradient(90deg, #ff6b6b, transparent 50%, #4ecdc4);
这样中间过渡段就是真透明，子元素内容不会被压暗。
立即学习“前端免费学习笔记（深入）”；
伪元素遮罩是更灵活的备选方案
当背景复杂（比如图片 + 模糊 + 透明叠加），又不想动原结构时，可用 ::before 伪元素单独控制遮罩层：
- 给父容器设
position: relative - 伪元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4) - 确保伪元素
z-index低于子元素，但高于背景图
这种方式把“透明层”和“内容层”彻底分离，改透明度不会误伤文字或交互控件。
真正要小心的是那些看起来没写opacity 却出现子元素发灰的情况——大概率是父级某个祖先元素设置了 opacity，或者用了 backdrop-filter 配合半透背景，这种影响是穿透式的，得一层层往上查。 
