CSS 一个div中的多个背景图

在本文中，我们将介绍如何使用CSS在一个div中添加多个背景图。多个背景图可以为网页增加视觉层次感，并且提供更丰富的设计选择。我们将学习如何使用CSS属性实现多背景图，并给出一些实例说明。

阅读更多：CSS 教程

CSS的background-image属性

在CSS中，我们可以使用background-image属性来为元素添加背景图片。通常情况下，一个元素只能拥有一张背景图，但我们可以使用一些技巧来实现多背景图的效果。

CSS3的multiple background images

CSS3引入了multiple background images的功能，允许我们在一个元素中同时添加多个背景图片。我们可以通过在background-image属性中使用多个URL值来实现这一效果。每个URL值之间使用逗号进行分隔。

下面是一个示例，展示了如何为一个div添加多个背景图：

.div {
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
}

这个例子中，一个div将会显示三个背景图。第一个背景图是image1.jpg，第二个背景图是image2.jpg，第三个背景图是image3.jpg。

多背景图的顺序

在使用多背景图时，我们可以通过改变URL值的顺序来改变背景图的显示顺序。显示顺序从前往后，即第一个背景图层在最底层，最后一个背景图层在最上层。

下面是一个示例，展示了如何改变多背景图的显示顺序：

.div {
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
}

这个例子中，首先显示image1.jpg，然后是image2.jpg，最后是image3.jpg。

多背景图的位置和尺寸控制

每个背景图层都可以通过background-position和background-size属性来设置位置和尺寸。

下面是一个示例，展示了如何设置多背景图的位置和尺寸：

.div {
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
  background-position: center top, left bottom, right bottom;
  background-size: cover, auto, auto;
}

这个例子中，第一个背景图层的位置是居中顶部，尺寸是等比例缩放以覆盖整个div。第二个背景图层的位置是左下角，尺寸是原始大小。第三个背景图层的位置是右下角，尺寸是原始大小。

我们可以根据具体需求来调整每个背景图层的位置和尺寸，以实现所需的效果。

背景图层重复和剪裁

和单背景图一样，我们也可以设置多背景图层的重复和剪裁方式。

下面是一个示例，展示了如何设置多背景图层的重复和剪裁：

.div {
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
  background-repeat: no-repeat, repeat-x, repeat-y;
  background-clip: border-box, padding-box, content-box;
}

这个例子中，第一个背景图层不会重复，剪裁方式是border-box，即在div的边框内显示。第二个背景图层在水平方向上重复，垂直方向不重复，剪裁方式是padding-box，即在div的内边距区域内显示。第三个背景图层在垂直方向上重复，水平方向不重复，剪裁方式是content-box，即在div的内容区域内显示。

通过设置背景图层的重复和剪裁方式，我们可以进一步控制多背景图的显示效果。