rgba(0,0,0,透明度)是实现黑色半透明背景的首选方案，可精准控制明暗与通透感，且不影响子元素；需避免使用opacity以免连带降低子内容透明度；兼容性方面IE8以下需添加纯黑降级；配合backdrop-filter可实现毛玻璃效果。
最直接的方式是用 rgba(0, 0, 0, 透明度)，比如 rgba(0, 0, 0, 0.5) 表示半透黑色，既简洁又兼容现代浏览器，还能精准控制明暗与通透感。
rgba 是首选：黑+透明，一步到位
rgba 中前三个值固定为 0, 0, 0（纯黑），第四个值是 alpha 通道（0～1）：
-
rgba(0, 0, 0, 0.2)—— 很淡的灰黑，适合蒙层或弱化背景 -
rgba(0, 0, 0, 0.6)—— 常用中等遮盖力，文字清晰、背景隐约可见 -
rgba(0, 0, 0, 0.85)—— 接近不透明，保留一丝透气感，适合深色弹窗底衬
避免用 opacity：它会影响整个元素及其子内容
如果给容器设 opacity: 0.5，里面的所有文字、图标也会变半透明，通常不是想要的效果。而 rgba 背景只作用于背景色本身，子元素保持原样。
兼容性小提醒：老版 IE 需 fallback
IE8 及以下不支持 rgba。若必须兼容，可加一层 background-color: #000 作为降级（纯黑），再覆盖 background-color: rgba(0,0,0,0.6)。现代项目基本可忽略此限制。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：配合 backdrop-filter 做毛玻璃效果
在支持的浏览器中，叠加 backdrop-filter: blur(4px) 和 rgba(0,0,0,0.3)，能做出细腻的深色磨砂玻璃背景，常用于模态框或导航栏：
- 先确保父容器有真实背景（如图片或渐变）
- 子层设
background: rgba(0, 0, 0, 0.3)+backdrop-filter: blur(4px) - 注意加
-webkit-backdrop-filter保证 Safari 兼容
不复杂但容易忽略：透明度数值越小越“轻”，别一上来就用 0.7——试试从 0.3 开始微调，往往更耐看。
