父元素设 opacity 时子元素无法避免变透明，因其作用于整个渲染盒；应改用 rgba()/hsla() 控制背景或 filter: opacity() 实现子元素隔离透明。
父元素设 opacity 时，子元素会“被迫变透明”，哪怕自己写了 opacity: 1 也无效——因为 opacity 是渲染层叠加效果，不是独立属性继承。要真正隔离透明控制，得换思路：用 rgba() 或 hsla() 管背景，或用 filter: opacity() 控制主体而不波及子级。
opacity 的本质是“整体渲染压暗”，不是“颜色变淡”
它作用于整个元素的绘制盒（painting box），包括边框、背景、文字、子元素，全部被统一降不透明度。子元素无法“逃出”这个渲染层级。
- 父元素
opacity: 0.4→ 整个盒子以 40% 不透明度绘制 - 子元素即使设
opacity: 1，也只是在父级已压暗的画布上再画一次，视觉结果仍是 0.4 - 鼠标事件仍可触发（除非额外加
pointer-events: none）
用 rgba() / hsla() 只透背景，文字照常清晰
这是最常用、兼容性最好、语义最明确的替代方案：只让颜色通道带透明度，不影响布局和子内容。
-
background-color: rgba(0, 0, 0, 0.4);→ 黑色背景半透，文字 100% 不透明 -
border-color: rgba(255, 100, 100, 0.6);→ 边框半透，内部文字/图片不受影响 - 注意：不能用于纯
color属性的“全局透明”，但可直接写color: rgba(0,0,0,0.8)单独调文字透明度
filter: opacity() 是更干净的“元素级”透明
它像给元素贴了一层滤镜，只改变自身像素，不改变子元素的渲染上下文，且支持链式叠加（比如加模糊再调透明）。
立即学习“前端免费学习笔记（深入）”；
-
filter: opacity(40%);或filter: opacity(0.4); - 子元素保持原始 opacity 值，完全不受干扰
- 兼容性：Chrome 18+、Firefox 35+、Safari 9.1+、Edge 17+，IE 不支持
- 适合需要动态控制透明又含复杂子结构的组件（如卡片、弹窗、图标按钮）
什么时候该选哪种？
看目标：
- 只要背景透、文字不透 → 用
rgba()最稳 - 要整个元素（含边框、阴影）渐变透明，且含子元素 → 优先
filter: opacity() - 只需简单悬停淡入淡出，无子内容干扰 →
opacity最轻量、动画性能好 - 老项目需兼容 IE8–9 → 只能靠
rgba()+ 后备色（background: #000; background: rgba(0,0,0,0.4);）
