最稳妥的做法是用 rgba() 或 hsla() 设置 background-color 实现背景半透明，避免使用 opacity（会导致整个元素及子元素变透明）；现代浏览器均支持，可结合 css 自定义属性动态控制。
直接用 rgba() 设置背景色最稳妥
想让 div 背景半透明，别用 opacity——它会让整个元素（包括文字、子元素）都变透明。正确做法是给 background-color 用 rgba() 值，只影响背景层。
比如深灰背景带 70% 不透明度：
background-color: rgba(33, 33, 33, 0.7);
-
rgba(r, g, b, a)中的a是 alpha 通道，取值范围是0（全透）到1（不透） - 十六进制色（如
#222）不能直接加透明度，必须转成rgb或rgba - 部分老浏览器（IE8 及更早）不支持
rgba()，若需兼容，得额外加filter回退（但现代项目通常不用管）
用 hsla() 实现色相可调的半透明背景
如果设计中需要频繁调整色调（比如主题色切换），hsla() 比 rgba() 更直观——亮度、饱和度、透明度可独立控制。
例如：浅蓝背景，85% 透明度
background-color: hsla(204, 100%, 80%, 0.85);
立即学习“前端免费学习笔记（深入）”；
-
hsla(h, s%, l%, a)的h是色相（0–360），s%是饱和度，l%是亮度 - 改主题色时只需动
h值，a和l可保持不变，比换rgb数字更可控 - 所有现代浏览器都支持
hsla()，兼容性与rgba()一致
避免用 opacity 改背景透明度
这是新手最常踩的坑：
div { opacity: 0.6; } 看似“背景变淡”了，但实际是把整个 div 及其内部所有内容（文字、按钮、图片）一起压暗、变模糊。
- 如果父容器设了
opacity，子元素无法通过设置opacity: 1恢复不透明——透明度会叠加 -
opacity还可能触发浏览器重绘优化问题，在滚动或动画中出现闪烁 - 真要全局降噪（比如模态框遮罩），才用
opacity；仅背景透，必须用rgba/hsla
CSS 自定义属性 + rgba() 实现动态透明背景
如果项目里多个组件共用同一套半透明背景逻辑（比如卡片毛玻璃、悬浮菜单），推荐用 CSS 变量统一管理：
:root {
--bg-base: 255, 255, 255;
--bg-alpha: 0.92;
}
.card {
background-color: rgba(var(--bg-base), var(--bg-alpha));
}
- 修改
--bg-alpha就能一键调整所有用到该变量的背景透明度 -
rgba(var(--bg-base), ...)写法要求--bg-base是逗号分隔的数字（不能带单位或空格） - 注意：Sass/Less 编译时无法解析
var()，这类变量必须在运行时由浏览器计算
rgba()，而是意识到：背景透明和元素整体透明是两回事，而多数视觉需求只要前者。别让 opacity 偷偷吃掉你的文字可读性。 
