背景颜色属性
最后更新：2026-09-13
background-color 背景颜色属性
background-color 属性用于设置元素的背景颜色，是页面视觉设计中最基础的属性之一。它接受所有 CSS 颜色值，也可以使用 transparent 关键字实现透明背景。该属性不会被继承，每个元素默认背景为透明。
| 分类 | |
|---|---|
| 初始值 | transparent |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | color |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
background-color: <color> | transparent;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<color> | 类型 | 背景颜色值 |
transparent | 关键字 | 透明背景 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 背景色不会自动延伸到外边距区域，只有内容和内边距区域会被着色。
重要： 设置背景色时务必保证与文本颜色的对比度，确保可读性符合 WCAG 标准。
❓ 常见问题
Q如何让背景完全透明？
A设置 background-color: transparent; 即可让背景完全透明，露出下层元素或页面底色。注意透明只作用于背景，元素自身的内容（文字、子元素）不受影响；若想让整个元素连同内容一起消失，应改用 opacity: 0 或 visibility: hidden。
Qbackground-color 会继承吗？
A不会。background-color 的默认值是 transparent，每个元素独立计算，不从父元素继承。但子元素背景透明时视觉上会透出父元素或 body 的背景色，这也是在 body 上设置背景色能"感觉上"覆盖整个页面的原因。
Q如何让背景色带透明度而不影响文字？
A使用带 alpha 通道的颜色值，如 background-color: rgba(0, 0, 0, 0.5); 或 hsla(210, 50%, 50%, 0.5)，也可以用八位十六进制 #00000080。这样只有背景半透明，文字保持清晰。不建议用 opacity，因为它会把文字和子元素一起变透明。
Q背景色可以做渐变吗？
A不能。background-color 只支持纯色，渐变色属于背景图范畴，需使用 background-image: linear-gradient(to right, #ff7e5f, #feb47b); 等渐变函数。background-color 常作为基底层与渐变叠加，在渐变图未加载前提供颜色兜底。
🏷️ 相关属性
💡 相关案例
📚 相关教程
