CSS3-多背景

1. 介绍

CSS3中的多背景技术允许为一个元素设置多个背景图像，并且可以控制它们之间的位置、大小和重复方式。

多背景可以更加灵活地实现复杂的背景效果，而不必受到背景图像本身的尺寸、重复等限制。例如，可以为一个按钮设置底部和顶部两个不同颜色的背景，中间有一条用图像表示的边框线，通过多背景技术可以轻松实现。

2. 语法

background:
  [background-image] [background-position / background-size] [background-repeat] [background-clip] [background-origin],
  [background-image] [background-position / background-size] [background-repeat] [background-clip] [background-origin],
  ...

其中，background-image为必选属性，表示要设置的背景图像，可以设置多个。background-position、background-size、background-repeat、background-clip、background-origin都是可选属性，它们可以分别设置每个背景图像的位置、大小、重复方式、裁剪范围和参考位置。

多个背景图像之间用逗号分隔。如果设置了多个背景图像，则后面的背景图像会覆盖前面的背景图像。

3. 示例

下面是一个简单的例子，展示了如何为一个元素设置多个背景图像并控制它们的位置和大小：

<div class="example"></div>

.example {
  background:
    url('bg1.jpg') no-repeat center top,
    url('bg2.png') no-repeat left bottom,
    url('bg3.gif') repeat-x center bottom;
  background-size: cover;
  width: 400px;
  height: 300px;
}

上面的代码为.example元素设置了三个背景图像，分别是bg1.jpg、bg2.png和bg3.gif，它们的位置和重复方式都不同。第一个背景图像居中顶部，不重复；第二个背景图像左侧底部，不重复；第三个背景图像水平方向重复，垂直方向居中底部。

其中，background-size属性为将所有背景图像缩放为铺满整个.example元素。最终效果如下：

4. 兼容性

多背景技术在CSS3中引入，目前主流的浏览器都已经支持。但是，在早期版本的IE浏览器中不支持。如果需要适配旧版本IE浏览器，可以考虑使用IE滤镜或者其他Hack方法来实现类似的效果（不过这种方法已经逐渐淘汰了，因为它会导致性能问题、代码臃肿等问题）。