[分享]css两张背景图片

CSS中常常需要使用背景图片来装饰网页的元素。而有时候，我们还需要设置多张背景图片在同一个元素内，这就需要使用CSS3的background属性的多重背景图片特性。background属性中可以设置多...

CSS中常常需要使用背景图片来装饰网页的元素。而有时候，我们还需要设置多张背景图片在同一个元素内，这就需要使用CSS3的background属性的多重背景图片特性。

background属性中可以设置多个背景图片，每个图片通过一个逗号分开。下面是一个使用两张背景图片的例子：

element {
  background: url(image1.png) center center no-repeat, url(image2.png) top left no-repeat;
} 

上面这个例子中，element是一个元素的类名或者ID名。通过background属性设置，这个元素在背景中将显示两张图片，image1.png在元素正中间且不重复，image2.png在元素左上角且不重复。

除了背景图片的URL地址，我们还可以设置图片的位置、重复方式、尺寸，以及不同层级的堆叠顺序。下面是一个使用多重背景图片设置图片堆叠顺序的例子：

element {
  background: url(image1.png) center center no-repeat,
              url(image2.png) top left no-repeat,
              url(image3.png) bottom right no-repeat;
  background-position: center center, top left, bottom right;
  z-index: 1, 2, 3;
} 

上面这个例子中，我们设置了三张背景图片，分别显示在最前、第二层、最后一层。通过background-position属性设置图片位置，z-index属性设置图片层级。

总的来说，CSS中的多重背景图片功能可以让我们在网页布局中更加灵活地使用多张图片来装饰元素，带来更丰富的视觉效果。