opacity会使整个元素及子元素一同变透明，而rgba()仅控制颜色透明度且不影响子元素；遮罩推荐用伪元素+rgba实现，避免opacity误用。
opacity 会让整个元素及其子元素一起变透明
这是最容易踩的坑：opacity 作用于整个渲染树节点，设置父容器 opacity: 0.5，里面所有文字、图片、按钮都会跟着半透明，无法单独保留子元素的清晰度。
常见错误场景：想给背景加遮罩但保持文字不透明，结果写了：
.overlay {
opacity: 0.4;
}导致文字也模糊了。这时候应该换思路——用背景色本身带透明度，而不是靠 opacity。
-
opacity取值范围是0（全透）到1（不透），不支持百分比写法 - 它会触发新层叠上下文，可能意外影响
z-index行为 - 动画性能较好（GPU 加速支持度高），但语义上不精准
rgba() 是控制颜色透明度的正确方式
真正该用来做“背景遮罩”的是 rgba()，它只让颜色通道带 alpha 值，不影响子元素。
立即学习“前端免费学习笔记（深入）”；
比如给一个 div 加深色半透背景，同时文字保持 100% 不透明：
.card {
background-color: rgba(0, 0, 0, 0.3); /* 黑色背景，30% 不透明 */
color: #fff;
}注意：rgba() 的第四个参数是 alpha 值（0～1），不是百分比；别写成 rgba(0,0,0,30%)，浏览器会直接忽略整条声明。
- 仅适用于
background-color、color、border-color等接受颜色值的属性 - 不能用于控制整个盒子的透明度（比如让边框+背景+文字统一变淡）
- IE8 及以下不支持，需 fallback（如用半透 PNG 图片）
遮罩效果推荐用伪元素 + rgba 实现
需要叠加一层可点击/可动画的遮罩层？别用 opacity 包裹整个内容区，用 ::before 或 ::after 单独画一层：
.image-container {
position: relative;
}
.image-container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.image-container img {
display: block;
z-index: 0;
position: relative;
}
这样图片和文字（如果有的话）完全不受遮罩影响，还能自由控制遮罩的 hover 动画、渐变过渡等。
- 必须给父容器设
position: relative，否则伪元素定位失效 - 伪元素默认无内容，
content: ''不可省略 - 若遮罩需响应点击，加
pointer-events: none；若要拦截点击，则保持默认或设pointer-events: auto
opacity 和 rgba 混用时要注意层叠顺序
当两者共存，比如父容器用了 opacity，内部又用了 rgba() 背景，alpha 值会叠加计算——不是简单取最大值，而是按渲染流程复合。
例如：
.parent { opacity: 0.8; }
.child { background-color: rgba(255, 0, 0, 0.5); }最终子元素红色背景的视觉透明度 ≈ 1 − (1−0.8) × (1−0.5) = 0.9，即 90% 不透明。这种复合容易误判，调试困难。
- 优先选择单一透明策略：要么全用
rgba()控制颜色级透明，要么用opacity控制整体（且确认子元素确实该一起变淡） - Chrome DevTools 的 “Computed” 面板里能看到最终生效的
rgb()值，但不会显示叠加后的 alpha，得自己心算或截图比对 - 涉及动画时，
opacity更易硬件加速；rgba()改变 background-color 属于“重绘”，高频动画慎用
实际项目中，遮罩几乎都该走 rgba() + 伪元素路线。opacity 真正适合的场景其实很少——比如淡入淡出整个弹窗、全局 loading 蒙层，而且你确定里面所有内容都该同步变淡。
