CSS 背景颜色

在 CSS 中，背景颜色可以使用 background-color 属性来设置。该属性可以接受任何 CSS 颜色值，例如命名颜色，十六进制值，RGB 值等等。

基本用法

设置背景颜色的最基本的方式就是使用 background-color 属性，例如：

body {
  background-color: #eee;
}

上述代码将设置 body 元素的背景颜色为浅灰色 (#eee)。

命名颜色

CSS 提供了一些预定义的颜色名称，可以直接在 background-color 属性中使用。例如：

.element {
  background-color: green;
}

上述代码将设置 .element 元素的背景颜色为绿色。

可以使用的预定义颜色有：

• black：黑色 (#000)

• silver：银色 (#c0c0c0)

• gray 或 grey：灰色 (#808080)

• white：白色 (#fff)

• maroon：栗色 (#800000)

• red：红色 (#ff0000)

• purple：紫色 (#800080)

• fuchsia 或 magenta：洋红色 (#ff00ff)

• green：绿色 (#008000)

• lime：酸橙色 (#00ff00)

• olive：橄榄色 (#808000)

• yellow：黄色 (#ffff00)

• navy：海军蓝 (#000080)

• blue：蓝色 (#0000ff)

• teal：水鸭色 (#008080)

• aqua 或 cyan：青色 (#00ffff)

十六进制值

CSS 中常用的一个颜色值表示方式就是十六进制值。该值由六个字符组成，每两个字符表示一个颜色分量的值，范围是从 00 到 ff。例如：

.element {
  background-color: #ff0000;
}

上述代码将设置 .element 元素的背景颜色为红色 (#ff0000)。

RGB 值

另一种表示颜色值的方式是 RGB 值。RGB 值由三个分量组成，分别表示红、绿、蓝三种颜色的分量，在 CSS 中可以使用 rgb() 函数来表示。例如：

.element {
  background-color: rgb(255, 0, 0);
}

上述代码将设置 .element 元素的背景颜色为红色。

RGBA 值

如果需要给颜色添加透明度，可以使用 RGBA 值。RGBA 值与 RGB 值类似，只不过多了一个表示透明度的分量，范围是从 0 到 1。在 CSS 中可以使用 rgba() 函数来表示，例如：

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

上述代码将设置 .element 元素的背景颜色为半透明的红色。

HSL 值

HSL 是另一种表示颜色的方式，它表示颜色的色相、饱和度和亮度。在 CSS 中可以使用 hsl() 函数来表示。例如：

.element {
  background-color: hsl(0, 100%, 50%);
}

上述代码将设置 .element 元素的背景颜色为红色。

HSLA 值

和 RGBA 类似，如果需要给 HSL 颜色添加透明度，可以使用 HSLA 值。在 CSS 中可以使用 hsla() 函数来表示，例如：

.element {
  background-color: hsla(0, 100%, 50%, 0.5);
}

上述代码将设置 .element 元素的背景颜色为半透明的红色。

参考链接

• MDN 文档：background-color