rgba()只影响当前属性的色彩通道，文字变透明是因为误用了opacity；其四参数分别为红、绿、蓝（0–255）和alpha（0–1），非百分比；ie8需用png或伪元素模拟；搭配backdrop-filter时注意浏览器支持、overflow裁剪及性能。
rgba() 设置背景透明度时，为什么文字也变透明了？
直接给元素设置 rgba() 背景色（比如 background-color: rgba(0, 0, 0, 0.5)）本身没问题，但如果你发现子元素里的文字、图标甚至边框也跟着半透明，大概率是因为你把 opacity 和 rgba() 混用了——opacity 会作用于整个元素及其所有后代，而 rgba() 只影响当前属性的色彩通道。
正确做法是：只对 background-color 使用 rgba()，确保文字颜色用不带透明度的纯色（如 #fff 或 rgb(255, 255, 255)）。
rgba() 的四个参数分别代表什么？常见取值误区
rgba(r, g, b, a) 中前三个是 0–255 的整数，第四个 a 是 0–1 的浮点数（0 完全透明，1 完全不透明）。注意不是百分比，写成 0.5 是对的，50% 或 50 会直接失效。
-
rgba(255, 255, 255, 0.8)→ 浅白背景，80% 不透明 -
rgba(0, 0, 0, 0.1)→ 几乎看不见的黑底，适合蒙层 - 误写
rgba(0, 0, 0, 50)或rgba(0, 0, 0, 50%)→ 浏览器忽略该声明，回退到默认背景色
需要兼容 IE8 及更老浏览器怎么办？
rgba() 在 IE9+ 才原生支持。如果必须兼容 IE8，有两个务实选择：
- 用半透明 PNG 图片作为
background-image（例如 1×1 像素的灰黑渐变图，导出为 50% 透明 PNG） - 加一层伪元素遮罩：
::before绝对定位 +background-color: #000+opacity: 0.5，再通过z-index控制层级。注意此时伪元素需设content: ""，否则不渲染 - 不推荐滤镜写法（如
filter: progid:DXImageTransform.Microsoft.gradient），维护成本高且行为不稳定
和 backdrop-filter 搭配使用时要注意什么？
想做毛玻璃效果（比如半透背景 + 模糊后面内容），常组合 background-color: rgba(255, 255, 255, 0.7) 和 backdrop-filter: blur(4px)。但要注意：
-
backdrop-filter在 Safari 和 Chrome 82+ 支持良好，Firefox 默认禁用（需手动开启layout.css.backdrop-filter.enabled） - 如果父容器有
overflow: hidden，模糊区域会被裁剪，需确保容器留出足够 padding 或改用overflow: visible -
rgba()的透明度值不宜过低（如a ），否则模糊效果几乎不可见
真正容易被忽略的是：rgba() 本身不触发硬件加速，但加上 backdrop-filter 后，浏览器会强制启用合成层——这意味着在低端设备上可能掉帧，调试时建议打开 DevTools 的 Rendering 面板观察“Layers”变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
