CSS 背景颜色

Begindev 编辑部 March 25, 2026

应用背景颜色是增强网页视觉效果和引导用户视线的最基本方法之一。

本章将深入探讨如何使用 CSS 将背景颜色应用于 HTML 元素，探索各种颜色值格式并演示实际案例。

1. 理解 `background-color` 属性

CSS 中的 background-color 属性允许你设置元素的背景颜色。它接受不同的颜色值格式，包括 Hex 代码、RGB、RGBA、HSL 和 HSLA。让我们探索如何使用这些格式。

1.1 使用 Hex 代码 (十六进制) 应用背景颜色

Hex 代码是 CSS 中广泛使用的指定颜色的方式。Hex 代码是一个六位数的十六进制数字，通常以 # 符号开头。前两位代表红色分量，接下来的两位代表绿色分量，最后两位代表蓝色分量。

body {
  background-color: #f0f0f0; /* 浅灰色背景 */
}
.container {
  background-color: #e6e6e6; /* 稍微深一点的灰色背景 */
  padding: 20px;
}
h1 {
  background-color: #c0c0c0; /* 银色背景 */
  color: #333; /* 深灰色文本 */
}

在这个例子中，我们将 body 的背景设置为浅灰色 (#f0f0f0)，.container 设置为稍深的灰色 (#e6e6e6)，h1 标题设置为银色背景 (#c0c0c0)。

1.2 使用 RGB 应用背景颜色

RGB (红, 绿, 蓝) 是另一种常见的颜色模型。它指定每个颜色分量（红、绿和蓝）的强度，范围从 0 到 255。

body {
  background-color: rgb(240, 240, 240); /* 浅灰色背景 */
}
.container {
  background-color: rgb(230, 230, 230); /* 稍微深一点的灰色背景 */
  padding: 20px;
}
h1 {
  background-color: rgb(192, 192, 192); /* 银色背景 */
  color: rgb(51, 51, 51); /* 深灰色文本 */
}

这个例子与 Hex 代码示例类似，但使用的是 RGB 值。rgb(240, 240, 240) 代表浅灰色。

1.3 使用 RGBA 应用背景颜色 (支持透明度)

RGBA (红, 绿, 蓝, Alpha) 是 RGB 颜色模型的扩展，包含一个 Alpha 通道，用于指定颜色的不透明度。Alpha 值的范围从 0（完全透明）到 1（完全不透明）。

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色覆盖层 */
  padding: 20px;
  color: white;
}
.highlight {
  background-color: rgba(255, 255, 0, 0.2); /* 20% 不透明度的浅黄色高亮 */
  padding: 5px;
}

在这里，.overlay 类有一个半透明的黑色背景，使其看起来像覆盖在其他内容之上。.highlight 类有一个淡淡的黄色背景，创造出微妙的高亮效果。

1.4 使用 HSL 应用背景颜色

HSL (色相, 饱和度, 亮度) 模型根据色相（色轮上的位置）、饱和度（强度）和亮度（明暗）来表示颜色。色相以度数 (0-360) 表示，饱和度和亮度以百分比 (0-100%) 表示。

body {
  background-color: hsl(0, 0%, 94%); /* 浅灰色背景 */
}
.container {
  background-color: hsl(0, 0%, 90%); /* 稍微深一点的灰色背景 */
  padding: 20px;
}
h1 {
  background-color: hsl(0, 0%, 75%); /* 银色背景 */
  color: hsl(0, 0%, 20%); /* 深灰色文本 */
}

在这个例子中，我们使用 HSL 定义灰色阴影。色相为 0 代表红色，但饱和度为 0% 时，它就变成了灰色。亮度值控制灰色的深浅。

1.5 使用 HSLA 应用背景颜色

HSLA 是 HSL 模型的扩展，包含 Alpha 通道以指定不透明度，类似于 RGBA。

.overlay {
  background-color: hsla(0, 0%, 0%, 0.5); /* 半透明黑色覆盖层 */
  padding: 20px;
  color: white;
}
.highlight {
  background-color: hsla(60, 100%, 50%, 0.2); /* 20% 不透明度的浅黄色高亮 */
  padding: 5px;
}

2. 实战示例与演示

让我们看一个结合了这些概念的更详细的示例。假设你正在设计一篇博客文章。

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>博客文章</title>
  <style>
    body {
      background-color: #f4f4f4; /* 页面整体背景 */
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 80%;
      margin: 20px auto;
      background-color: white; /* 内容容器背景 */
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
      color: #333;
      background-color: rgba(255, 255, 255, 0.8); /* 稍微透明的白色背景 */
      padding: 10px;
    }
    p {
      line-height: 1.6;
      color: #555;
    }
    .highlight {
      background-color: hsla(60, 100%, 80%, 0.3); /* 浅黄色高亮 */
      padding: 2px 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>我的精彩博客</h1>
    <p>
      这是一篇关于 CSS 背景颜色的文章。你可以使用 Hex 代码 <span class="highlight">#f0f0f0</span>，
      RGB 值 <span class="highlight">rgb(240, 240, 240)</span>，
      RGBA 值 <span class="highlight">rgba(0, 0, 0, 0.5)</span>，
      HSL 值 <span class="highlight">hsl(0, 0%, 94%)</span>，以及 HSLA 值
      <span class="highlight">hsla(60, 100%, 80%, 0.3)</span> 来设置背景颜色。
    </p>
    <p>
      尝试不同的值，为你的网站找到完美的外观。选择背景颜色时，请记住考虑可读性和对比度。
    </p>
  </div>
</body>
</html>

示例解析：

body 具有浅灰色背景 (#f4f4f4)。
.container 具有白色背景，使内容突出。
h1 标题具有略微透明的白色背景 (rgba(255, 255, 255, 0.8))。
.highlight 类使用 HSLA 值实现淡黄色高亮效果。

1. 理解 background-color 属性