背景颜色 - CSS

CSS 是一种用来渲染 HTML 页面样式的语言，它能够为网站提供丰富的外观和交互效果。其中一项最常用的样式属性就是设置背景颜色。

设置背景颜色

通过 background-color 属性可以设置 HTML 元素的背景颜色。这个属性可以接受各种颜色值，包括 RGB、十六进制值、颜色名等等。

以下是一些设置颜色的例子：

/* 通过颜色名设置背景颜色 */
body {
  background-color: white;
}

/* 通过 RGB 值设置背景颜色 */
.header {
  background-color: rgb(255, 0, 0); /* 红色背景 */
}

/* 通过十六进制值设置背景颜色 */
.footer {
  background-color: #00ff00; /* 绿色背景 */
}

设置背景图片

除了设置纯色的背景外，我们还可以通过 background-image 属性来设置背景图片。这个属性可以接受图片的 URL，它会将指定的图片平铺到 HTML 元素的背景上。

以下是一个设置背景图片的例子：

.header {
  background-image: url('header.png'); /* 设置背景图片 */
  background-repeat: no-repeat; /* 不重复平铺 */
}

背景颜色和图片的组合

你可以同时使用 background-color 和 background-image 属性，来实现背景颜色和图片的组合效果。

以下是一个背景颜色和图片的组合的例子：

.header {
  background-color: #fff;
  background-image: url('header.png');
  background-repeat: no-repeat;
  background-position: center; /* 将图片置于元素中心 */
}

总结

通过设置 background-color 和 background-image 属性，你可以实现各式各样的背景效果。只需要掌握 CSS 的基础语法和属性，就能轻松实现网站的个性化风格。