假设您要在网页上放一两张图片。一种方法是使用background-imageCSS属性。

如文档所述<div>，此属性将一个或多个背景图像应用于元素，例如。出于美学原因使用它，例如在网页上添加带纹理的背景。

添加图像

使用该background-image属性添加图像很容易。只需在url()值中提供图像的路径即可。

图像路径可以是URL，如下例所示：

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

也可以是本地路径。这是一个例子：

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

添加多个图像

您可以将多个图像应用于background-image属性。

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

那是很多代码。让我们分解一下。

url()用逗号分隔每个图像值。

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

现在，通过应用其他属性来定位和增强图像。

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

您可以将几个子属性添加到背景图像中，例如background-repeat和background-position，我们在上面的示例中使用了。您甚至可以将渐变添加到背景图像。

当我们将所有内容放在一起时，看看是什么样子。

 

订单事项

由于堆叠顺序，您列出图像的顺序很重要。根据文档，这意味着列出的第一张图像离用户最近。然后，下一个，下一个，依此类推。

这是一个例子。

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

我们在上面的代码中列出了两张图片。第一张图片（morocco-blue.png）将位于第二张图片（oriental-tiles.png）的前面。两张图片的大小相同，并且不透明，因此我们只能看到第一张图片。

但是，如果我们将第二个图像（oriental-tiles.png）向右移动200像素，那么您可以看到其中的一部分（其余部分保持隐藏状态）。

这是我们将所有内容放在一起时的样子。

什么时候应该使用背景图片？

该background-image物业有很多值得一提的地方。但是有一个缺点。

文档指出，并非所有用户都可以访问该图像，就像使用屏幕阅读器的用户一样。

那是因为您不能向background-image属性添加文本信息。结果，屏幕阅读器会遗漏图像。

background-image仅在需要在页面上添加装饰时才使用该属性。否则，<img>如文档所述，如果图像具有意义或目的，请使用HTML 元素。

这样，您可以使用描述图片的alt 属性将文字添加到图片元素。屏幕阅读器将提取提供的文本。

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

这样想吧：background-image是CSS属性，而CSS专注于表示形式或样式；HTML专注于语义或含义。

对于图像，您可以选择。如果需要装饰图像，那么该background-image物业可能是您的理想选择。