应使用 rgba() 或 hsla() 设置背景透明度，而非 opacity；opacity 会使整个元素及子元素变透明、降低对比度、影响可访问性，而 rgba() 仅作用于背景色，保持文字清晰，兼容现代浏览器，支持渐变与 CSS 变量。
用 opacity 给元素设透明度时，整个元素（包括文字、子元素）都会变透明，叠加多层后容易发灰、对比度下降。真正要的只是“背景透明”，文字和内容保持清晰，应该用 rgba() 或 hsla() 直接设置背景色的透明度。
别用 opacity 控制背景透明
opacity 是作用于整个元素及其所有后代的，比如一个带文字的卡片设置了 opacity: 0.8，不仅背景变淡，文字也跟着变浅，再叠一层半透蒙版，文字就更难读，整体发灰发闷。
- opacity 影响渲染树中的整个层，无法单独控制背景
- 嵌套结构下，子元素透明度会层层相乘（如父级 0.8 × 子级 0.9 = 实际 0.72）
- 可访问性下降：文字灰暗导致对比度不达标（WCAG 要求至少 4.5:1）
用 rgba() 给 background-color 单独设透明度
把原本写成 background-color: #000; opacity: 0.5; 的写法，改成直接用 rgba(0, 0, 0, 0.5)。这样只有背景色带透明，文字、边框、图标等其他内容完全不受影响。
- 支持所有现代浏览器（IE9+），兼容性足够好
- 可以和渐变、图片背景组合使用：
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), url(bg.jpg); - 配合 CSS 变量更灵活：
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.15);
需要兼容老 IE？用半透 PNG 或 filter
如果必须支持 IE8 及以下，rgba() 不生效，可用：
立即学习“前端免费学习笔记（深入）”；
- 1×1 像素的半透明 PNG 作为 background-image（工具可生成，体积极小）
- IE 滤镜：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);（十六进制前两位是 alpha，00–FF） - 注意：filter 仅适用于 IE，且可能影响性能或触发 layout bug，优先考虑降级为纯色背景
小技巧：用 backdrop-filter 配合 rgba 做毛玻璃效果
想实现「背景虚化 + 半透」的现代效果（如 macOS 菜单），不要只靠多层 opacity，而是：
- 容器设
background-color: rgba(255, 255, 255, 0.7) - 加上
backdrop-filter: blur(10px)（需加-webkit-前缀） - 确保父容器有实际背景（如 body 有图或色块），否则虚化无效果
透明背景的本质是分离“颜色通道”和“透明通道”，rgba 就是为此而生。用对了，层次清爽、文字锐利、视觉可控。
