[分享]css3多张不同背景图片

 关于CSS3实现多张不同背景图片的方法，有两种主要方式：使用backgroundimage属性和使用CSS3多重背景。 使用backgroundimage属性时，可以通过给元素设置多个背景图片的方式...

 关于CSS3实现多张不同背景图片的方法，有两种主要方式：使用background-image属性和使用CSS3多重背景。
使用background-image属性时，可以通过给元素设置多个背景图片的方式来实现。在CSS中，background-image属性可以接受多个URL值，通过逗号隔开每个URL值，就可以将多张不同的背景图片应用到同一个元素上。例如，下面的代码可以将两张不同的背景图片应用到一个元素上：

 p {
      background-image: url(bg1.png), url(bg2.png);
      background-position: top left, bottom right;
      background-repeat: no-repeat;
   } 

上面的代码将两张不同的背景图片应用到了p元素上，其中第一张背景图片为bg1.png，第二张背景图片为bg2.png。同时，background-position属性也被用来控制两张背景图片的位置。通过设置background-position属性，将两张背景图片放置于顶部左侧和底部右侧。
另一种方法是使用CSS3多重背景。这是CSS3新增的功能之一，它允许一个元素同时使用多个不同的背景图片，并让用户轻松地管理每个不同背景的样式。例如，下面的代码可以实现一个元素同时应用两种不同背景：

 p {
      background-image:
         url(bg1.png) top left no-repeat,
         url(bg2.png) bottom right no-repeat;
      height: 100px;
      width: 100px;
   } 

上面的代码通过使用CSS3多重背景，将两张不同的背景图片应用到p元素上。其中，第一张背景图片为bg1.png，被设置到了元素的顶部左侧，不进行重复和滚动。第二张背景图片为bg2.png，被设置到了元素的底部右侧，同样不进行重复和滚动。
综上所述，通过使用CSS3的background-image属性和多重背景，我们可以在同一个元素上轻松地应用多张不同的背景图片，并进行灵活的排布和控制。