opacity 作用于整个渲染层，使子元素一同变透明；应改用 rgba() 控制背景透明，或用伪元素隔离图层实现背景与内容分层。
opacity 会让子元素变透明，这不是 bug，是规范行为
当你给父容器写 opacity: 0.5，子元素文字、图片、按钮全跟着发虚——哪怕你单独给子元素写 opacity: 1 也没用。这不是浏览器抽风，而是 CSS 渲染模型决定的：opacity 作用于**整个渲染层（painting layer）**，包括所有后代内容。它不是“颜色属性”，而是一个**合成透明度开关**，会把整棵 DOM 子树压平后统一叠加上透明效果。
最常用解法：用 rgba() 替代 opacity 控制背景透明
如果你只要背景半透、内容清晰，直接换掉 opacity，改用带 alpha 通道的颜色值：
.al-box {
background-color: rgba(0, 0, 0, 0.4); /* 黑色背景，40% 透明 */
padding: 10px;
text-align: center;
}
.al-title {
font-size: 32px; /* 完全不透明，不受影响 */
}
.al-con {
font-size: 24px; /* 同样完全不透明 */
}-
rgba()只影响它所在的那个 CSS 属性（比如background-color或color），不会波及子元素 - 兼容性极好：IE9+、所有现代浏览器都支持
- 注意别写成
rgb(0,0,0,0.4)—— 缺少a字母会直接失效，变成不透明黑色
复杂背景怎么办？用伪元素或绝对定位隔离图层
当背景是渐变、图片、或者需要多层叠加时，rgba() 不够用（比如 background-image: linear-gradient(...) 无法直接加 alpha）。这时得把“透明背景”和“内容”拆成两个独立图层：
.parent {
position: relative;
}
.parent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7));
z-index: -1;
}
.parent > * {
/* 所有真实子元素自然在上层，完全不透明 */
}- 伪元素
::before或额外空<div>担任“背景层”，用z-index: -1压到最底层 - 真实内容子元素保持默认层级，不受任何透明度干扰
- 务必设
position: relative在父容器上，否则绝对定位会脱离预期范围
别踩坑：opacity 和 rgba 不是互斥，但混用可能白忙
有人试过这样写：background: rgba(0,0,0,0.5); opacity: 0.95;——结果背景更透、文字更虚。这是因为 opacity 仍会对整个元素生效，包括已用 rgba 设置的背景。除非你明确需要“整体淡出+局部微调”，否则二者不要共存。
立即学习“前端免费学习笔记（深入）”；
- 只想要背景透明 → 只用
rgba()或hsla() - 要做淡入动画 → 用
opacity，但确保它只作用在纯容器上，内容另起一层 - 老项目兼容 IE8？只能用
filter: alpha(opacity=50)，但它同样继承，没得绕
真正难处理的，是那些已经用 opacity 实现了交互动画、又突然要插入不透明富文本的场景——这时候得重构成两层结构，而不是硬加 opacity: 1 覆盖。
