rgba(0,0,0,0.5) 实现背景半透明，如 .example { background-color: rgba(0, 0, 0, 0.5); } 使背景黑且50%透明，文字不受影响，常用于模态框、图片标题区等场景。
在CSS中实现背景半透明效果，最常用的方法是使用 rgba() 颜色值来设置背景色。rgba 可以定义颜色的红（Red）、绿（Green）、蓝（Blue）分量以及一个额外的 alpha 通道（透明度），从而实现半透明背景。
什么是 rgba？
rgba 是 “Red, Green, Blue, Alpha” 的缩写：
- 前三个参数（R、G、B）取值范围为 0～255，表示颜色的红、绿、蓝成分。
- 第四个参数（Alpha）是透明度，取值范围为 0 到 1：
- 0 表示完全透明
- 1 表示完全不透明
- 0.5 表示 50% 透明度
如何用 rgba 设置半透明背景
直接在 background 或 background-color 属性中使用 rgba 值即可：
.example {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
color: white; /* 文字保持清晰可见 */
padding: 20px;
}
上面的例子中，背景为黑色（0,0,0）且透明度为 50%，文字仍为白色，不会受影响。
立即学习“前端免费学习笔记（深入）”；
常见应用场景
- 模态框或弹窗背景：用半透明黑色遮罩突出内容层。
- 图片文字标题区：在图片上方加一层半透明背景，让文字更易读。
- 导航栏透明效果：滚动时导航栏渐变为半透明。
与其他透明方式的区别
- opacity：会让整个元素及其所有子元素都变透明，不适合只想透明背景的情况。
- background: transparent：只能实现完全透明，无法控制半透明程度。
- rgba()：只影响背景色，不影响文字或其他子元素，推荐用于背景半透明。
基本上就这些。使用 rgba 设置背景半透明简单高效，兼容性也好（IE9+ 支持），是现代网页设计中的常用技巧。
