css定义多重背景图片

CSS是一种用于网页设计和排版的语言。有时候我们需要让一个元素显示多个背景图片，那么该怎么做呢？使用CSS3提供的multiple backgrounds功能是一个不错的选择。

background-image: url(image1.png),url(image2.png);
background-repeat: no-repeat,repeat-x;
background-position: top left,top right;

在上述代码中，我们使用逗号分隔了两个背景图片的URL，分别是image1.png和image2.png。我们同时定义了两个不同的重复方式，即第一个背景图片是不重复（no-repeat），第二个背景图片是水平重复（repeat-x）。对于两个背景图片的位置，我们也分别进行了定义，第一个在左上角（top left），第二个在右上角（top right）。

如果我们想要给元素添加更多的背景图片，只需要在background-image属性中加入更多的URL即可：

background-image: url(image1.png),url(image2.png),url(image3.png);
background-repeat: no-repeat,repeat-x,repeat-y;
background-position: top left,top right,bottom left;

在这个例子中，我们添加了第三个背景图片，重复方式和位置也进行了相应的调整。

需要注意的是，每个背景图片的定位都是相对于元素本身的，因此如果元素尺寸发生变化，背景图片的位置也会相应地改变。

同时，我们还可以通过background-size属性来调整每个背景图片的大小：

background-image: url(image1.png),bottom left;
background-size: cover,auto,50%;

在这个例子中，我们将第一个背景图片的大小设置为完全覆盖整个元素（cover），第二个背景图片的大小为自适应（auto），而第三个背景图片的大小设置为元素宽度的50%。

在定义多重背景图片的时候，我们需要注意不同背景之间的顺序。在上述例子中，第一个背景图片在最上面，第二个在第一个下面，第三个在第二个下面。如果我们想要调换多个背景图片的顺序，需要将相应的属性值调换位置即可。