[分享]css中如何更改图片的顺序

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

元素设置三个背景图片，分别是image1.jpg、image2.jpg和image3.jpg。它们会按照写入CSS文件的顺序从下往上排列，如下图：
如果我们想要调整背景图片的顺序，可以通过改变它们在CSS中的顺序来实现。比如，我们可以将image3.jpg放到第一项，代码如下：

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

这个代码块将使第一张背景图片变为image3.jpg，第二张为image1.jpg，第三张为image2.jpg。它们的层叠顺序也会被调整，如下图：
我们也可以使用background-position属性来进一步调整背景图片的位置。该属性的值可以是像素、百分比，也可以是关键字（如top、bottom、left、right、center）。以下代码将第二张背景图片向上移动50像素并向右移动20像素：

div {
  background: url("image3.jpg"), url("image1.jpg"), url("image2.jpg");
  background-position: 0 0, 20px 50px, center center;
} 

注意，我们在background-position中指定了三个值。这是因为我们要设置三个背景图片的位置。每个值对应原CSS中的一张图片（按顺序），用逗号分隔开。
总结
在CSS中，我们可以通过改变背景图片的顺序来调整它们的层叠顺序。所有的背景图片都按照在CSS文件中的顺序层叠在一起。我们还可以使用background-position属性进一步控制背景图片的位置。