CSS 背景颜色

背景颜色是CSS中最基础也是最常用的样式之一，它用于设置HTML元素的背景颜色。

基本语法

css

元素选择器 {
  background-color: 颜色值;
}

颜色值的表示方法

background-color属性支持多种颜色值的表示方法：

1. 颜色名称

使用预定义的颜色名称，如red、blue、green等。

css

p {
  background-color: red;
}

2. 十六进制颜色

使用十六进制表示法，以#开头，后跟6个十六进制字符（0-9, A-F）。

css

p {
  background-color: #ff0000; /* 红色 */
}

也可以使用简写形式（3个字符）：

css

p {
  background-color: #f00; /* 红色 */
}

3. RGB颜色

使用rgb()函数表示红、绿、蓝三原色的组合，每个值的范围是0-255。

css

p {
  background-color: rgb(255, 0, 0); /* 红色 */
}

4. RGBA颜色

在RGB的基础上增加了透明度（Alpha通道），透明度值的范围是0-1（0表示完全透明，1表示完全不透明）。

css

p {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

5. HSL颜色

使用hsl()函数表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。

色相：0-360度（0表示红色，120表示绿色，240表示蓝色）
饱和度：0%-100%（0%表示灰色，100%表示完全饱和）
亮度：0%-100%（0%表示黑色，50%表示正常，100%表示白色）

css

p {
  background-color: hsl(0, 100%, 50%); /* 红色 */
}

6. HSLA颜色

在HSL的基础上增加了透明度（Alpha通道）。

css

p {
  background-color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

应用场景

1. 设置元素背景

为段落、标题、容器等元素设置背景颜色：

css

p {
  background-color: #f5f5f5;
}

h1 {
  background-color: #333;
  color: white;
}

2. 创建强调效果

使用背景颜色突出显示重要内容：

css

.important {
  background-color: yellow;
  padding: 10px;
  border-radius: 5px;
}

3. 创建视觉层次

通过不同的背景颜色区分页面的不同部分：

css

.header {
  background-color: #2c3e50;
  color: white;
}

.nav {
  background-color: #34495e;
}

.main {
  background-color: #ecf0f1;
}

.footer {
  background-color: #2c3e50;
  color: white;
}

注意事项

默认值：background-color的默认值是transparent（透明）。
继承性：background-color属性不具有继承性，子元素不会自动继承父元素的背景颜色。
与文本颜色的对比度：确保背景颜色与文本颜色有足够的对比度，以保证可读性。
性能影响：纯颜色背景对性能影响很小，但如果结合其他背景属性（如背景图片、渐变等），可能会对性能产生一定影响。

浏览器兼容性

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
IE	IE6及以上支持

RGB、RGBA、HSL、HSLA在IE8及以下浏览器中不支持。

总结

background-color是CSS中用于设置元素背景颜色的基础属性，支持多种颜色表示方法。合理使用背景颜色可以增强页面的视觉效果和可读性，创建清晰的视觉层次。

title: CSS 背景颜色 description: 学习CSS background-color属性的使用方法和技巧 keywords:

CSS
背景颜色
background-color
颜色 update: ‘2026-02-07’ slogan: CSS背景颜色完全指南