必须用 background-color: rgba() 设置背景透明度，文字和子元素保持不透明；rgba() 仅作用于背景色本身，R/G/B 为 0–255 整数，alpha 为 0–1 小数，IE8 不支持，不可用 opacity 替代。
直接用 background-color: rgba() 设置背景透明度
想让背景色带透明效果，同时文字、子元素保持不透明，必须用 rgba() 函数写在 background-color 里。它只作用于颜色本身，不影响内容渲染。
常见错误是把 rgb(255,0,0) 写成 rgba(255,0,0,0.5) 却没加 background-color: 前缀，或者误写成 background: rgb(...) —— 这样 alpha 值会被浏览器忽略，变成纯色。
-
rgba(255, 0, 0, 0.5)：红色背景，50% 透明（不是“半透明红”，而是红+底色混合） - R/G/B 必须是整数（0–255），不能用百分比或单词如
red - Alpha 值必须是 0–1 之间的小数，
0.0完全透明，1.0完全不透明 - IE8 及更早版本不支持
rgba()；如需兼容，得额外提供 fallback 颜色，比如：background-color: #ff0000;<br>background-color: rgba(255, 0, 0, 0.5);
别用 opacity 替代 rgba() 改背景透明度
opacity 是对整个元素做透明处理，包括文字、边框、子元素——它不是“背景透明”，而是“整块变淡”。如果你只想透出背后的内容（比如一张图、另一层 div），又希望文字清晰可读，opacity 就会破坏可用性。
典型翻车场景：
- 弹窗蒙层用了
opacity: 0.3，结果里面按钮文字也看不清了 - 导航栏设了
opacity: 0.8，图标和文字一起发虚，点击区域变弱 - 和
rgba()混用时，opacity会二次叠加透明度，导致意外过透
记住：只要目标只是「背景色透明」，就不要碰 opacity。
hsla() 是 rgba() 的语义友好替代方案
如果你经常调色、换主题，hsla() 比 rgba() 更直观：色相（hue）决定主色，饱和度（saturation）和亮度（lightness）控制浓淡明暗，alpha 控制透明度。
例如：hsla(195, 100%, 50%, 0.2) 是一种偏蓝的浅透明色，改 195 到 0 就秒切红色系，不用重新算 RGB 数值。
注意点：
-
hsla()和rgba()兼容性基本一致（都从 IE9+ 开始支持） - 色相取值是 0–360 的整数，不是角度单位，别加
deg - 饱和度和亮度用百分比，必须带
%符号，如80%，不能写0.8
透明背景在真实项目里的坑：层级与混合模式
透明背景不是设完就完事。当它叠在图片、渐变或复杂背景上时，视觉效果取决于父容器是否设置了 background-blend-mode 或是否被 backdrop-filter 影响。
容易被忽略的三点：
- 如果父容器没设背景，透明背景会直接透到
<body>或白色画布，看起来像“没生效” - 多个透明层叠加时，alpha 不是简单相加，而是按 CSS compositing 规则混合（比如两个
0.5层叠 ≠1.0） - 用
rgba()或hsla()设置背景后，若再加backdrop-filter: blur(4px)，部分安卓 WebView 会失效，得测试真机
最稳妥的做法：始终明确父级背景，用 devtools 的颜色拾取器确认最终渲染值，而不是只信代码里的 alpha 数字。
