1.介绍
在网页设计中，设置背景颜色是一个非常重要且基础的步骤。背景颜色可以影响网页的整体氛围以及对于用户的视觉体验。在 CSS 中，设置网页的背景颜色需要使用 background-color 属性。
1.1 body 元素
body 元素是网页的主要内容区域。在 CSS 中，为 body 设置背景颜色可以让整个网页的背景都发生改变。
body {
background-color: #f2f2f2;
}
上面的代码将 body 的背景颜色设置为浅灰色，使用 # 表示十六进制颜色值。
1.2 色彩模式
在 CSS 中，有许多不同的色彩模式。有三种最常用的色彩模式，分别是：
RGB 模式：由红、绿、蓝三个通道组合而成
HSL 模式：由色相、饱和度、亮度三个通道组合而成
十六进制模式：使用十六进制的数值表示颜色
在 CSS 中，可以使用这三种模式来表示颜色值。
2. 颜色格式
在 CSS 中，可以使用多种颜色格式来定义颜色值。下面是常见的几种颜色格式：
2.1 RGB 格式
RGB（Red Green Blue）指的是红、绿、蓝三原色。在 CSS 中，可以使用 RGB 格式来定义颜色值。RGB 格式由 rgb() 函数表示，函数中包含三个参数，分别是红、绿、蓝三原色的亮度值（取值范围为 0~255）。
body {
background-color: rgb(255, 255, 255);
}
上面的代码将 body 的背景颜色设置为白色。
2.2 RGBA 格式
RGBA（Red Green Blue Alpha）是 RGB 格式的扩展，支持设置颜色的透明度。在 CSS 中，可以使用 RGBA 格式来定义颜色值。RGBA 格式由 rgba() 函数表示，函数中除了包含红、绿、蓝三原色的亮度值外，还包括一个表示透明度的参数（取值范围为 0~1，0 表示完全透明，1 表示完全不透明）。
body {
background-color: rgba(0, 0, 0, 0.5);
}
上面的代码将 body 的背景颜色设置为黑色，透明度为 0.5。
2.3 十六进制格式
使用十六进制格式来定义颜色值是 CSS 中最常用的方式。在 CSS 中，可以使用三种形式的十六进制格式（短格式、长格式和透明度格式）来定义颜色值。十六进制格式表示为 # 加上六位十六进制数（或三位短格式的十六进制数）。
2.3.1 短格式
短格式的十六进制颜色值由三个十六进制数表示，每个数都是其对应的两个相等的十六进制数字的缩写。例如，#fff 是短格式的白色。
body {
background-color: #fff;
}
2.3.2 长格式
长格式的十六进制颜色值由六个十六进制数表示，每个数代表一种颜色的亮度值。例如，#ffffff 是长格式的白色。
body {
background-color: #ffffff;
}
2.3.3 透明度格式
透明度格式的十六进制颜色值由八个十六进制数表示，前六个数代表颜色亮度值，后两个数代表透明度。例如，#ffffff80 表示白色不透明度为 50%。
body {
background-color: #ffffff80;
}
2.4 HSL 格式
HSL（Hue Saturation Lightness）指的是色相、饱和度、亮度三种颜色属性。在 CSS 中，可以使用 HSL 格式来定义颜色值。HSL 格式由 hsl() 函数表示，函数中包括三个参数，分别是色相、饱和度和亮度。
body {
background-color: hsl(120, 100%, 50%);
}
上面的代码将 body 的背景颜色设置为绿色。
2.5 HSLA 格式
HSLA（Hue Saturation Lightness Alpha）是 HSL 格式的扩展，支持设置颜色的透明度。在 CSS 中，可以使用 HSLA 格式来定义颜色值。HSLA 格式由 hsla() 函数表示，函数中除了包括色相、饱和度和亮度外，还包括一个透明度的参数。
body {
background-color: hsla(120, 100%, 50%, 0.5);
}
上面的代码将 body 的背景颜色设置为半透明绿色。
3.选择颜色的技巧
颜色的选择可以根据需要进行调整。下面是一些选择颜色的技巧：
3.1 色彩搭配
选择颜色时，要考虑不同颜色之间的关系。合理的颜色搭配可以让网页更加美观。其中一种常用的色彩配色方式是互补色的搭配。互补色是指色轮上相互对立的两种色彩，如红色和绿色、蓝色和橙色、黄色和紫色等。互补色的搭配可以产生强烈的对比效果，增强网页的视觉冲击力。
3.2 色相和饱和度
在选择颜色时，可以通过调整色相和饱和度来使颜色更加丰富多彩。色相是颜色的基本属性，可以通过改变色相来实现不同颜色之间的转换。饱和度是颜色的强度，可以通过调整饱和度来使颜色更加明亮或柔和。
4.CSS 背景颜色实例
下面给出一些在常见网站上用到的背景色示例。
4.1 百度
百度的背景色采用纯白色，给人以简洁明了的感觉。代码如下：
body {
background-color: #fff;
}
4.2 谷歌
谷歌的背景色采用纯白色，给人以整洁高效的感觉。代码如下：
body {
background-color: #fff;
}
4.3 淘宝
淘宝的背景色采用米色系，给人以温馨感染的感觉。代码如下：
body {
background-color: #f5f5f5;
}
4.4 新浪
新浪的背景色采用浅灰色，给人以简洁明了的感觉。代码如下：
body {
background-color: #f0f0f0;
}
4.5 知乎
知乎的背景色采用浅灰色，给人以文艺清新的感觉。代码如下：
body {
background-color: #f6f6f6;
}
5.总结
通过本文的介绍，我们了解了在 CSS 中设置背景颜色的方法以及常用的颜色格式。选择合适的颜色和搭配方式可以让网页更加美观。希望本文对你有所帮助。