如何通过CSS的rgba函数设置带透明度的颜色？
- 内容介绍
- 文章标签
- 相关推荐
本文共计845个文字，预计阅读时间需要4分钟。
RGBA颜色代码用于表示颜色和透明度。它接收四个参数：
例如：
color: rgba(255, 165, 0, 0.3); /* ✅ 正确：橙色，30% 不透明（即 70% 透明） */ color: rgba(255, 165, 0, 30%); /* ❌ 无效：alpha 不支持百分比 */ color: rgba(255, 165, 0, 30); /* ❌ 无效：alpha 超出 0–1 范围 */
rgba 与 opacity 的关键区别：继承与作用范围
rgba() 只影响**颜色本身**（如文字、边框、背景色），而 opacity 作用于整个元素及其所有子元素。如果你只想让背景半透、文字保持不透明，必须用 background-color: rgba(...)，而不是给容器设 opacity —— 后者会让里面的文字、图标也变淡，还可能引发可访问性问题。
本文共计845个文字，预计阅读时间需要4分钟。
RGBA颜色代码用于表示颜色和透明度。它接收四个参数：
例如：
color: rgba(255, 165, 0, 0.3); /* ✅ 正确：橙色，30% 不透明（即 70% 透明） */ color: rgba(255, 165, 0, 30%); /* ❌ 无效：alpha 不支持百分比 */ color: rgba(255, 165, 0, 30); /* ❌ 无效：alpha 超出 0–1 范围 */
rgba 与 opacity 的关键区别：继承与作用范围
rgba() 只影响**颜色本身**（如文字、边框、背景色），而 opacity 作用于整个元素及其所有子元素。如果你只想让背景半透、文字保持不透明，必须用 background-color: rgba(...)，而不是给容器设 opacity —— 后者会让里面的文字、图标也变淡，还可能引发可访问性问题。