CSS background-color 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

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。