应优先使用rgba()或hsla()的alpha值控制文字或背景透明度，避免opacity导致子元素叠加衰减、重绘异常及z-index干扰；背景图为图片时需用伪元素隔离并单独设opacity。
别用 opacity 控制文字或背景单独透明——它会让整个元素连同子内容一起变淡，而且嵌套时会叠加衰减，调试起来很反直觉。
只让文字变淡，改 color 里的 alpha 值
你真正想“调文字透明度”，其实是调文字颜色的不透明程度。直接改 color 属性，用 rgba() 或 hsla()，alpha 参数填 0–1 小数即可：
-
color: rgba(33, 33, 33, 0.6);—— 灰色文字，60% 不透明 -
color: hsla(210, 20%, 40%, 0.8);—— 偏蓝灰文字，80% 不透明 - 十六进制写法如
#333或#33333380都不行：#33333380是非标准写法，部分浏览器可能渲染但不可靠 - IE8 不支持
rgba()，但 2026 年绝大多数项目已无需兼容
只让背景变淡，改 background-color 的 alpha
背景透明 ≠ 元素整体透明。用 rgba() 或 hsla() 设 background-color，文字和边框完全不受影响：
-
background-color: rgba(255, 200, 100, 0.3);—— 橙色背景，30% 不透明 -
background-color: hsla(45, 100%, 60%, 0.2);—— 亮黄背景，20% 不透明 - 别用
opacity搞背景：它会把文字也压暗，还可能让子元素意外变灰 - 如果背景是图片，
rgba()无效，得用伪元素 +opacity分离图层（见下一条）
背景图要半透明，但文字必须清晰？用伪元素隔离
背景图本身不能单独设透明度，opacity 一加，上面的文字就糊了。正确做法是把图抽成 ::before，再单独控它的透明度：
.card {
position: relative;
color: white;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url("bg.jpg");
opacity: 0.4;
z-index: -1;
}
-
z-index: -1确保图在文字底下 - 伪元素只影响自己，不会波及
.card内任何子元素 - 避免用
filter: opacity()：它可能触发重绘异常，Windows 下字体发虚
什么时候才该用 opacity？
opacity 真正适用的场景其实很窄：整块卡片、弹窗、遮罩层需要统一淡入淡出，且内部没有需要保持高对比度的文本或控件。
- 取值必须是小数，
opacity: 75%或opacity: 75都无效，只认0.75 - 它会创建新的层叠上下文，可能干扰
z-index行为 - 父元素设了
opacity: 0.5，子元素即使写opacity: 1，最终也是0.5—— 因为透明度是相乘的，不是覆盖的
最常被忽略的一点：透明度不是“开关”，而是乘性因子。嵌套两层 opacity: 0.5，结果是 0.25，而不是你以为的“恢复”。所以优先用 rgba() 控单个颜色，比层层套 opacity 安全得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
