应使用 rgba() 或 hsla() 单独设置背景透明度，避免 opacity 影响文字；复杂背景用伪元素叠加遮罩；IE8 降级用 PNG 或 filter；渐变背景需提供不透明 fallback。
用 opacity 设背景透明会连带文字变浅，这是设计预期，不是 bug
因为 opacity 作用于整个元素及其所有子节点（包括文字），哪怕你只希望背景“透一点”，文字也会被一并削弱。这不是渲染错误，而是 CSS 规范定义的行为——opacity 操作的是整个渲染树节点的合成透明度。
常见错误写法：
.card { opacity: 0.9; background: #fff; }
结果是卡片和里面所有文字都变灰、发虚，可读性下降。
正确做法：用 rgba() 或 hsla() 单独控制背景色透明度
把背景色从十六进制或命名色改成带 alpha 通道的颜色函数，只影响背景层，不波及文字或其他子元素。
-
background: rgba(255, 255, 255, 0.9);—— 白色背景，90% 不透明 -
background: hsla(0, 0%, 100%, 0.9);—— 效果同上，更易做色相/饱和度调整 - 如果用 CSS 变量，推荐写成：
background: rgba(var(--bg-rgb), 0.9);，方便统一维护
注意：rgba() 的第四个参数是透明度（0–1），不是百分比；别写成 rgba(255,255,255,90%)，这在大多数浏览器里无效或报错。
遇到渐变背景或图片背景时，怎么加透明遮罩又不伤文字
不能直接给 background-image 加透明度，得靠伪元素或额外容器分层。
立即学习“前端免费学习笔记（深入）”；
- 用
::before伪元素盖一层半透色块：
.hero { position: relative; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1; }然后文字放在z-index: 2的子元素里 - 避免用
opacity在父容器上，否则所有子元素（包括按钮、图标）都会变淡 - 若用
backdrop-filter做毛玻璃效果，记得加background: rgba(..., 0.8)配合，否则在 Safari 上可能显示纯黑
IE 兼容场景下 rgba() 失效怎么办
IE8 及更早版本不支持 rgba()，但 IE9+ 支持。如果必须兼容 IE8，有两个务实选择：
- 降级为半透 PNG 背景图：
background: url(bg-white-90.png); - 用 IE 条件注释 +
filter（仅限 IE ≤ 8）：
.card { background: #fff; } .card { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff); }其中#e6ffffff是 ARGB 格式（前两位 e6 ≈ 90% 不透明） - 现代项目基本可忽略 IE8，但若真要保，优先选 PNG 方案——更稳定，无需计算 ARGB
真正容易被忽略的是：当背景是 linear-gradient + rgba() 组合时，部分老 Android WebView 会把 alpha 解析错，建议加个不透明 fallback：
background: #fff;
background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(240,240,240,0.9));
