CSS3之多背景background使用示例

下面是“CSS3之多背景background使用示例”的完整攻略：

1. 多背景实现方法

在CSS3中，可以使用多个background来设置元素的背景图片。多个背景图片的设置方法如下：

background: url(bg1.png) top left no-repeat, 
            url(bg2.png) top right no-repeat, 
            url(bg3.png) bottom left no-repeat;

其中，每个背景图片都由其URL（必需）和背景图片的其他特性（可选）组成。上述代码中内联的三个URL（用逗号隔开）表示有三张背景图片的背景，第一张在左上角，第二张在右上角，第三张在左下角。no-repeat表示该背景图片不重复，其他可选参数还有repeat（横向纵向都重复）、repeat-x（横向重复）、repeat-y（纵向重读）。

2. 多背景实现细节

1. 顺序

多背景中背景图片的顺序有实际意义，第一张背景图片会被覆盖在后面的背景图之上，而在其他的z-index相同时，如下面CSS中使用的bg1会位于下层，bg2位于上层：

div {
  background: url(bg1.jpg), url(bg2.jpg);
}

1. 背景大小

当同时有多个背景图片时，对于每个背景图片都可以单独命名背景大小，在需要情况下，可以只针对特定背景图片指定它的大小。以下背景大小如下：

div {
  background: url(bg1.jpg) no-repeat bottom right, 
              url(bg2.jpg) no-repeat top left;
  background-size: 50px 70px, cover;
}

上述代码中针对第一张背景图片指定了一个50px x 70px的大小，而对于第二张背景图片则直接使用了cover关键字来设置背景大小，cover关键字表示让背景图片填满整个元素。还有其他可选的关键字，如contain等。

1. 多个背景和透明效果

有时，我们需要在元素的背景中使用多张图片来实现某个特定的效果，而背景图片上本身需要设置透明效果，最好是同时透明，这样才能避免看到下面的背景图片。这里需要在CSS中把每个背景图片都标记为透明：

div {
  background: url(bg1.png) top left no-repeat, 
              url(bg2.png) top right no-repeat, 
              url(bg3.png) bottom left no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

上述代码中，opacity指定了整个元素的透明度为50%（0.5），而filter属性（IE浏览器专用）则更改了整个元素的透明度为50%（原本它没有透明度）。