应使用 background-color: rgba() 实现背景半透明而不影响子元素，因为 opacity 会作用于整个渲染盒导致子元素一同变透明，而 rgba() 的 alpha 通道仅作用于颜色本身，兼容性好且语义清晰。
opacity 会让子元素一起变透明，这不是 bug 是设计
CSS 的 opacity 作用于整个渲染盒（rendering box），包括所有后代元素。你设 opacity: 0.5，子元素不管有没有自己设 opacity，最终都会叠加变暗——这不是误用，是规范行为。想只让背景“半透”，文字和按钮保持不透明，就得绕开 opacity。
用 background-color: rgba() 替代透明背景
这是最直接、兼容性好、语义清晰的解法。RGBA 中的 a（alpha）只影响颜色本身，不污染子元素渲染流。
-
rgba(0, 0, 0, 0.3)表示黑色背景带 30% 透明度，文字照常 100% 不透明 - 别写成
background: rgba(……) transparent—— 多余的transparent会覆盖掉 rgba 效果 - 如果背景需要渐变或图片，
rgba()仍可作为叠加层：用伪元素或额外一层div套background-color: rgba(……) - IE9+ 支持
rgba()；IE8 及以下不支持，需备选方案（如 PNG 背景图）
为什么不用 filter: alpha() 或 backdrop-filter
filter: alpha(opacity=50) 是 IE 专属旧语法，现代项目不该用；backdrop-filter 是模糊 / 色偏背景用的，不是控制自身背景透明度的工具，且目前 Safari 对它的支持仍有渲染异常风险。
-
backdrop-filter影响的是“背后内容”的渲染，不是当前元素的背景色 - 用它模拟半透背景必须配合
background-color: transparent，但此时若父容器没背景，就啥也看不出来 - 部分安卓 WebView 和旧版 Chrome 会把
backdrop-filter当作opacity处理，导致子元素意外变淡
遇到层级遮挡时，优先检查 z-index 和堆叠上下文
用了 rgba() 后发现文字被盖住？大概率不是透明度问题，而是堆叠上下文搞乱了顺序。
立即学习 “ 前端免费学习笔记（深入）”；
- 只要父元素有
opacity、<code>transform、filter等属性，就会创建新堆叠上下文，子元素的z-index只在该上下文内生效 - 解决方法：把需要“浮在上面”的元素移出那个透明父容器，或改用
position: relative+z-index控制同级关系 - 调试技巧：在 DevTools 里看元素的“Computed”面板，搜
stacking context，确认是否意外触发
实际效果差异很直观：一个 div 设了 opacity: 0.7，里面 span 字体发灰；同样 div 改用 background-color: rgba(255,255,255,0.7)，span 还是锐利黑字。这个区别在弹窗、卡片、导航栏上特别关键——背景要柔和，内容得扛得住阅读。
