因为rgba()的alpha值作用于整个元素及其内容，导致文字继承透明度；解决方法是用伪元素或额外容器分离背景与内容，使背景透明而文字保持不透明。
background-color 用 rgba 设置透明背景时，为什么文字也变透明了？
因为 rgba() 是颜色值本身带透明度，它作用于整个元素——包括文字、边框、子元素。如果你只想要背景透明而文字不透明，不能靠 background-color: rgba(0,0,0,0.5) 后再给文字单独设不透明，那没用，文字的透明度由父元素继承而来。
解决办法是把背景和内容分离：用伪元素或额外容器承载背景，主元素只放内容。例如：
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}想让整个元素（含文字）都半透明，该用 rgba 还是 opacity？
两者效果看似一样，但行为完全不同：
-
rgba()只影响颜色通道，仅对设置了该颜色的属性起作用（比如background-color、color），不影响子元素的布局或层级 -
opacity作用于整个元素及其所有后代，会“压平”层叠上下文，导致z-index失效、遮罩异常、动画卡顿等问题
所以：要整体淡入淡出动画，用 opacity；要局部控制（比如仅背景半透、文字保持 100% 不透明），必须用 rgba() 或 hsla() 配合结构隔离。
立即学习“前端免费学习笔记（深入）”；
rgba 的 alpha 值写小数还是百分数？兼容性有区别吗？
rgba(r, g, b, a) 的第四个参数 a 必须是 0–1 之间的小数（如 0.7），不是百分比（70% 是错的，会直接失效）。
浏览器支持很成熟，IE9+、所有现代浏览器都支持。但注意：IE8 及更早版本完全不识别 rgba()，会直接忽略整条声明，此时可加降级色：
div {
background-color: #000; /* fallback for IE8- */
background-color: rgba(0, 0, 0, 0.5);
}除了 rgba，还有哪些方式能实现透明背景？
常见替代方案有这些，适用场景不同：
-
background-color: hsla(0, 0%, 0%, 0.5)—— 和rgba等价，只是用色相/饱和度表示，适合设计系统中统一管理颜色变量 -
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5))—— 冗余但有时用于覆盖图片背景，避免rgba被误删 - CSS 自定义属性 +
rgba()动态计算：background-color: rgba(var(--r), var(--g), var(--b), 0.5)（需配合:root定义变量）
真正容易被忽略的是：当背景是渐变叠加 rgba 时，alpha 值不会叠加，而是按最终渲染像素混合——调试时建议用 DevTools 的颜色拾取器确认实际显示值，别只信代码里的数字。
