opacity 会乘法影响子元素显示效果且无法通过子元素 opacity:1 覆盖，因其作用于整个渲染盒子并强制创建层叠上下文；推荐用 rgba/hsla 控制局部透明或拆分 DOM/伪元素实现视觉分层。
opacity 会直接影响子元素，且无法用子元素自身 opacity:1 覆盖
会。这是 opacity 的底层渲染机制决定的——它作用于整个“渲染盒子”（rendering box），包括边框、背景、文字、所有子节点，甚至伪元素。哪怕你在子元素里写 opacity: 1 或 opacity: 1 !important，最终显示效果仍是父级透明度 × 子级透明度（比如 0.4 × 1 = 0.4）。这不是继承 bug，而是浏览器合成层的数学叠加。
- 子元素不会“继承”父级
opacity值，但它的视觉呈现必然被父级透明度乘法影响 - 设置
opacity会强制创建新的层叠上下文（stacking context），可能意外改变z-index行为 - 对含阴影、transform 的元素用
opacity动画时，GPU 加速通常仍有效，但透明度“穿透”问题无法规避
想只让背景/边框半透？用 rgba() 或 hsla() 替代
这是最常用、最干净的解法。因为 rgba() 只影响它所在的 CSS 属性（如 background-color、border-color、color），完全不波及子元素。
.card {
background-color: rgba(255, 255, 255, 0.85); /* ✅ 背景微透，文字清晰 */
color: #333;
}
.card h2 {
/* 不需要额外设 opacity，天然不透明 */
}
.card img {
/* 图片也不受影响 */
}-
rgba(r, g, b, a)中的a是 alpha 通道，取值 0～1，和opacity数值意义一致但作用域不同 -
hsla(h, s, l, a)同理，适合基于色相调整的场景（比如主题色动态变浅） - IE9+ 全支持，现代项目可放心使用，无需 polyfill
必须用 opacity 做动画或整体雾化？那就拆 DOM 结构
当你要对整块区域（含阴影、缩放、模糊滤镜）做淡入淡出，又要求内部按钮/表单保持 100% 不透明时，硬套父子结构必然失败。此时要主动打破 DOM 嵌套关系，改用视觉重叠。
- 把“背景层”和“内容层”改为同级兄弟元素，都放在一个
position: relative的容器内 - 用
position: absolute+z-index控制叠放顺序，让内容层盖在背景层之上 - 只给背景层设
opacity，内容层完全自由控制
.overlay-wrapper {
position: relative;
width: 300px;
height: 200px;
}
.overlay-bg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
opacity: 0.6;
}
.overlay-content {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
/* ✅ 这里可以加 focus 样式、hover 动画、阴影，全都不受透明干扰 */
}容易忽略的关键点：伪元素也能当“透明背景”用
如果不想多写一层 DOM，::before 或 ::after 伪元素是轻量替代方案——它们本质是父元素的“子渲染节点”，但不受父元素 opacity 影响（因为不是真实子元素），却能通过定位覆盖在内容上。
立即学习“前端免费学习笔记（深入）”；
- 给父元素设
position: relative，再用::before绘制半透背景 - 父元素本身保持
opacity: 1，文字、按钮等直接子元素天然清晰 - 伪元素可设
z-index: -1确保在内容之下，避免遮挡交互
真正难的从来不是“怎么写”，而是判断该用哪个方案：局部调色选 rgba，整块动效选结构拆分，极简封装选伪元素。别让一个 opacity 把整个组件逻辑带偏。
