学习CSS的背景图像属性background

1. CSS中的背景图像属性

在CSS中，我们可以使用background属性来设置一个元素的背景。通过设置background属性的不同参数，我们可以对背景进行更精细的控制。其中一个非常重要的参数就是背景图像属性background-image。

1. 背景图像属性background-image的使用方法

通过使用background-image，我们可以指定元素的背景图像。该属性接受一个URL值，也就是一个图片的地址。例如，我们可以这样设置一个元素的背景图像：

background-image: url("test.jpg");

这样就将一个名为test.jpg的图片作为该元素的背景图像。需要注意的是，我们一定要使用正确的图片地址，否则图片就无法显示。

1. 背景图像属性的重复和位置

在使用背景图像属性时，我们可以通过background-repeat参数来设置背景图像的重复方式。默认情况下，背景图像会在水平和垂直方向上平铺。如果我们不想让它重复，可以设置为no-repeat，例如：

background-repeat: no-repeat;

同时，我们还可以使用background-position参数来设置背景图像的位置。该参数接受两个值，第一个值是水平方向的位置，第二个值是垂直方向的位置，例如：

background-position: 0 0;

这样就将背景图像放到了元素的左上角。还可以使用left、right、center、top、bottom这几个关键字来设置位置。

1. 示例

下面是一个示例，展示如何使用背景图像属性来设置一个元素的背景图像：

/* 先设置一个元素的宽高 */
div {
  width: 200px;
  height: 200px;
  /* 这里设置背景图像的地址 */
  background-image: url("test.jpg");
  /* 设置背景图像不重复 */
  background-repeat: no-repeat;
  /* 将背景图像放到元素的中心 */
  background-position: center center;
}

再来看一个例子，展示如何设置一个带有背景图像的导航菜单：

/* 导航菜单的样式 */
.nav {
  /* 先设置宽和背景颜色 */
  width: 100%;
  background-color: #333;
}
/* 单个菜单项的样式 */
.nav li {
  /* 先设置宽和高 */
  width: 200px;
  height: 50px;
  /* 设置菜单项的背景图像 */
  background-image: url("menu.png");
  /* 将背景图像放在菜单项的左边 */
  background-position: left center;
  /* 背景图像不重复 */
  background-repeat: no-repeat;
  /* 让菜单项左边有一定的空隙 */
  padding-left: 60px;
}