假设您要在网页上放一两张图片。一种方法是使用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物业可能是您的理想选择。