背景颜色

background-color 属性使用颜色值或通过关键字（如 transparent，inherit 或 initial）设置元素的背景颜色。

• transparent ，指定背景颜色应该是透明的。这是默认的。

• 继承，从其父元素继承此属性。

• initial ，将此属性设置为其默认值。

这可以应用于所有元素，以及::first-letter / ::first-line 伪元素 。

CSS 中的颜色可以通过不同的方法指定。

颜色名称

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• 上面使用的示例是 CSS 必须表示单一颜色的几种方法之一。

十六进制颜色代码

十六进制代码用于表示基本 16 位十六进制表示法的颜色的 RGB 分量。例如，#ff0000 是亮红色，其中颜色的红色分量是 256 位（ff），并且颜色的相应绿色和蓝色部分是 0(00)。

如果三个 RGB 配对（R，G 和 B）中的每一个中的两个值相同，则颜色代码可以缩短为三个字符（每个配对的第一个数字）。#ff0000 可以缩短为 #f00，#ffffff 可以缩短为 #fff。

十六进制表示法不区分大小写。

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

声明颜色的另一种方法是使用 RGB 或 RGBa。

RGB 代表红色，绿色和蓝色，需要三个单独的 0 到 255 之间的值，放在括号之间，分别对应红色，绿色和蓝色的十进制颜色值。

RGBa 允许你在 0.0 和 1.0 之间添加额外的 alpha 参数以定义不透明度。

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

声明颜色的另一种方法是使用 HSL 或 HSLa，类似于 RGB 和 RGBa。

HSL 代表色调，饱和度和亮度，通常也称为 HLS：

• 色调是色轮上的度数（从 0 到 360）。
• 饱和度是 0％到 100％之间的百分比。
• 亮度也是 0％和 100％之间的百分比。

HSLa 允许你在 0.0 和 1.0 之间添加额外的 alpha 参数以定义不透明度。

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

与背景图像的交互

以下陈述都是等效的：

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

它们都将导致图像下方显示红色，图像的部分是透明的，或图像未显示（可能是由于 background-repeat）。

请注意，以下内容不等同于：

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

在这里，background 的价值超越你的 background-image。

有关 background 属性的更多信息，请参阅背景速记