
定义和用法
background-color
是 CSS 中用于设置元素背景颜色的属性,它会显示在背景图像(如果有)的下方。
background-color
会填充元素的内容区域、内边距(padding
)区域和边框(border
)的背景,但不包括外边距(margin
)区域。
默认值: | transparent |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS1 |
JavaScript 语法: | object.style.backgroundColor="#00FF00" |
常用的实例
接下来通过多个实例演示background-color
属性的用法,来深化您对background-color
属性的理解。
/* 使用颜色名称 */
.example1 {
background-color: lightblue;
}
/* 使用十六进制值 */
.example2 {
background-color: #e0e0e0;
}
/* 使用RGB值 */
.example3 {
background-color: rgb(200, 200, 200);
}
/* 使用RGBA值(带透明度) */
.example4 {
background-color: rgba(0, 0, 255, 0.3);
}
/* 透明背景 */
.example5 {
background-color: transparent;
}
/* 背景颜色+背景图片 */
.example6 {
background: #f0f0f0 url("image.png") no-repeat center;
}
CSS 语法
background-color: color|transparent|initial|inherit;
属性值
值 | 描述 |
---|---|
color_name |
规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number |
规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number |
规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
color_name |
规定颜色值为颜色名称的背景颜色(比如 red)。 |
transparent |
背景颜色为透明(默认值)。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持background-color
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | Edge | Firefox | Safari | Opera |
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
相关页面
CSS 教程:CSS 背景
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
32
章节
23
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈