CSS3 多重背景

在CSS3之前，一个元素只能设置一个背景图像。而CSS3中，可以为一个元素添加多个背景图像。定义多图像背景时，只需在 background-image 或 background 属性列出需要使用的所有背景图像，并用逗号隔开。而且，每个背景图像都具有 background 中的任何属性，如可以设置背景位置、设置背景重复、设置背景尺寸等，多个属性值按顺序依次对应。如果某个属性只提供了一个参数值，则所有背景的该属性都使用这个参数值。

默认情况下，背景图像从元素的左上角开始显示，并会在水平方向和垂直方向重复。如果多重背景图像之间存在交集（即背景相互重叠），前面定义的背景图像会覆盖在后面定义的背景图像之上。

所以，定义多背景时，还需要设置背景图像的显示位置和平铺方式。否则，背景重叠的区域会发生覆盖，影响甚至看不出多重背景的效果。如：

1. div {
2.     width: 200px;
3.     height: 200px;
4.     border: 1px dashed #ccc;
5.     background-color: yellow;
6.     background-repeat: no-repeat;
7.     background-position: left top, right bottom;
8.     background-image: url(img/bg.gif), url(img/bg2.gif);
9. }

上述代码中，为容器定义了两幅背景图像，一幅图像在左上角，一幅图像在右下角，并把背景颜色设置为黄色。应用多重背景后的显示效果如图 4‑36 所示：

图4-36 多重背景

从上图可以看出，背景图像没有覆盖到的地方，显示黄色背景颜色。这是因为，如果一个元素同时定义了背景颜色和背景图像，它们会同时生效。当 background-image 属性取值为 none 或指定的 url 无效时，则会显示背景颜色；当背景图像可用时，背景图像将覆盖在背景颜色之上，如果背景图像不能占满整个容器，背景图像没有覆盖的地方也会显示背景颜色。

在定义多重背景时，除了使用独立属性外，也可以复合属性。使用复合属性时，使用逗号来分隔每组背景参数。

使用这种方法的好处是，开发者既可以指定备用背景颜色，也可以为老浏览器指定背景图像。如：

1. div {
2.    …
3.    background: yellow url(img/bg.gif) no-repeat left top;  /* 备用颜色和图像 */
4.    background: url(img/bg.gif) no-repeat left top,
5.                url(img/bg2.gif) no-repeat right bottom;
6. }

这跟前面的代码几乎是相同的，只是使用了复合属性，而且还为IE8 及其他老浏览器同时提供了背景颜色和背景图像。并且，在现代浏览器中，显示效果也跟前面完全相同。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。