17370845950

设置 opacity 会让子元素一起变透明，因为 opacity 作用于整个元素及其后代渲染层，透明度按乘积计算；想背景透明而文字不透明，应使用 rgba()、hsla() 或 8 位十六进制颜色值。

为什么设置 opacity 会让子元素一起变透明？

因为 opacity 不是颜色属性，而是作用于整个元素及其所有后代的渲染层。只要父元素设置了 opacity: 0.5，浏览器就会把该元素（含子元素）当作一个整体进行半透明混合，子元素无法通过设置 opacity: 1 挽回——这个值是相对于父容器的，最终合成透明度是乘积关系（比如父 0.5 × 子 1 = 0.5）。

想让背景透明但文字不透明，该用什么替代 opacity？

优先用支持 alpha 通道的颜色值：

• background-color: rgba(0, 0, 0, 0.3) —— 仅背景透明，文字、边框、子元素完全不受影响
• background-color: hsla(200, 100%, 50%, 0.3) —— 同理，更利于色相调整
• background-color: #0000004D —— CSS Color Module Level 4 的 8 位十六进制写法（前 6 位是 RGB，后 2 位是 alpha），Chrome 65+、Firefox 95+、Safari 15+ 支持

opacity 和 rgba() 在层叠上下文上有啥区别？

关键差异在于是否触发新的层叠上下文：

• 设置 opacity 小于 1 会强制创建新层叠上下文，可能意外改变 z-index 层级顺序，尤其在动画或弹窗叠加时容易错位
• rgba() 或 hsla() 不触发新层叠上下文，层级行为完全由原本的 position、z-index 控制，更可预测
• 若需过渡/动画透明效果，opacity 仍可接受；但纯视觉分层需求（如模态框遮罩 + 清晰文字），必须用 rgba() 配合 background-color

遇到旧项目只能用 opacity 怎么局部“取消”透明？

严格来说不能真正“取消”，但可通过结构隔离绕过继承：

• 把需要保持不透明的内容移出透明父容器，用绝对定位 + 同级 sibling 方式覆盖（需确保父容器 position: relative）
• 避免用 opacity 控制整块 UI 的透明，拆分为独立的透明背景层 + 不透明内容层
• 慎用 transform: translateZ(0) 或 will-change: opacity 强制硬件加速——这会加剧层叠上下文问题，不是解法

.card {
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.card-content {
  position: relative;
  z-index: 2; /* 文字在透明蒙层之上，且自身无 opacity */
}

父元素的 opacity 影响子元素不是 bug，是规范定义的行为；真正容易被忽略的是：它同时*了层叠顺序和性能渲染路径，而多数人只盯着“文字变淡”这一个表象。