13.6 使用多重背景
为单个HTML元素指定多个背景是CSS中最令人期待的一个特性，如图13-5所示。通过减少对某些元素的需求（这类元素存在只是为了用CSS添加额外的图像背景），指定多重背景便可以简化HTML代码，并让它容易理解和维护。多重背景几乎可以应用于任何元素。
多重背景不需要使用厂商前缀。
使用多重背景，可以使用长形式语法书写，也可以使用短形式语法书写。
如果采用长形式语法，需要单独设置4个背景属性：background-color、backgroundimage、background-position和background-repeat。使用其中任何一个属性，都可以调整图像的定位和重复方式。
（1）background-image：多个图像路径，中间用逗号隔开；
（2）background-position：每个背景图片都有一组x-offset和y-offset值，在该属性中依次输入成对的x-offset和y-offset值，x-offset和y-offset之间用空格隔开，每一对xoffset和y-offset之间用逗号隔开；
（3）background-repeat：依次输入每个背景图片的平铺方式，用逗号隔开；
（4）background-color：为元素设置备用的背景颜色。
在图13-5所示的例子中，在这个区域内采用了3个背景图像。
图13-5 多重背景
添加class为night-sky的div，代码如下：
在CSS中为其添加多重背景，代码如下：
在div元素中依次添加了“ufo.png”“stars.png”和“sky.png”3个背景图像；3张图的位置为第一张图50% 100%（水平居中垂直居下），后两张图0 0（左上角对齐）；3张图的平铺方式分别为第一张图不平铺，后两张图水平平铺。背景图像是分层次相互重叠在一起的，用逗号分隔的列表中的第一个图像位于顶部，最后一个图像位于底部，每一个图像都位于前一个图像的下方。
该例中的多重背景也可以采用短形式语法来书写，使用逗号分隔每组背景参数，代码如下：
不支持多重背景图像的浏览器会忽略background-image属性，如果指定了backgroundcolor值，将会显示background-color的样式来替代背景图像，图13-6所示为在IE8.0下打开的界面，由于只有IE9.0以上的版本才支持多重背景，因此只显示背景颜色。
图13-6 不支持多重背景的浏览器只显示背景颜色