opacity 会让子元素一起变透明，因为其作用于整个渲染层而非仅当前元素；子元素设 opacity:1 无效，应改用 rgba() 控制颜色透明度或伪元素隔离背景。
opacity 为什么会让子元素一起变透明
因为 opacity 不是“只作用于当前元素视觉层”，而是作用于整个渲染层（painting layer）——浏览器会把父元素及其所有后代合成一个透明图层再绘制。哪怕子元素写了 opacity: 1，它也只是在父层的 0.5 透明度基础上叠加，最终效果仍是 0.5 × 1 = 0.5。
- 这是 CSS 渲染规范定义的行为，不是 bug，也无法用子元素覆盖修复
- 即使给子元素加
position: relative或z-index，也无效——透明度发生在合成阶段，早于层叠上下文计算 - 常见误判：以为 “设子元素 opacity=1 就能恢复”，实际完全没用
用 rgba 替代 opacity 实现背景透明不透子元素
真正只影响“颜色本身”的透明控制，得靠支持 alpha 通道的颜色函数，比如 rgba()、hsla() 或十六进制带 alpha 的 #RRGGBBAA（Chrome 129+ / Safari 17.4+ 支持）。最稳妥通用的是 rgba()。
-
background-color: rgba(0, 0, 0, 0.5)→ 只让背景色半透明，文字、子盒子、边框全都不受影响 - 不能写成
background: rgba(...) !important来覆盖其他 background 声明，要确保它生效（例如没被background-image覆盖） - 如果原本用的是图片背景，可用
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(...)叠加蒙版
.card {
background-color: rgba(255, 255, 255, 0.85); /* 白底微透 */
border: 1px solid rgba(0, 0, 0, 0.1);
}
.card h2 {
color: #222; /* 完全不透明，清晰可见 */
}
.card .btn {
background-color: #007bff;
}遇到渐变/复杂背景时不能直接用 rgba 怎么办
当父容器需要线性渐变、径向渐变或多重背景时，rgba() 无法直接替代整个 background 值，这时需改用伪元素隔离透明层：
- 给父元素设
position: relative - 用
::before创建绝对定位伪元素，铺满父容器，只负责透明背景 - 把原内容（包括子元素）留在正常流中，自然不受伪元素透明度影响
- 注意：伪元素必须加
content: ""和z-index: -1确保在内容下方
.modal-overlay {
position: relative;
}
.modal-overlay::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
z-index: -1;
}兼容性和边界情况提醒
现代项目基本不用操心兼容性，但仍有几个真实坑点容易忽略：
立即学习“前端免费学习笔记（深入）”；
- IE 8 及更早版本不支持
rgba()，但 IE 已淘汰；若需支持旧内核，可用filter: progid:DXImageTransform.Microsoft.gradient（不推荐） -
border-color: rgba(...)和outline-color: rgba(...)同样有效，但box-shadow: rgba(...)是阴影整体透明，不影响子元素 - 如果父元素需要「内容+背景」都半透明（比如模态框遮罩），那就必须用
opacity，此时子元素本就不该独立显示——设计上应把可交互内容抽离到兄弟节点
真正要记住的只有一条：只要子元素需要保持清晰可读，就别碰父元素的 opacity，从颜色源头（rgba、伪元素、分离 DOM 结构）入手，而不是硬扛继承逻辑。
