css3的多背景有两种写法,一种是几个属性分开写,另一种是用简写的方法。

1、属性分开写

例子如下:

1
2
3
4
5
6
#example{
    width: 400px;height: 400px;
background-image:url(images/bg-1.png),url(images/bg-2.png),url(images/bg-3.png);
background-position:right top,left top,right bottom;
background-repeat: no-repeat;
}

多背景里,background-image属性是不能缺少的,另外支持的属性还有:

background-repeat,
background-attachment, background-position, 
background-clip, 
background-origin 
background-size

各属性的值以逗号分隔开。如果其他属性的值比background-image的多,那后面多的值都忽略。如果其他属性的值比background-image的少,那后面缺少的值都直接以第一个值为准。

2、简写

例子如下:

1
2
3
4
#example{
width: 400px;height: 400px;
    background:url(images/bg-1.png) right top no-repeat, url(images/bg-2.png) left top no-repeat,#fff url(images/bg-3.png) right bottom no-repeat;
}

如果需要写到背景色,那背景色必须写在最后面,像上面的例子那样。

无论是属性分开写,还是简写的方式,所有背景的层级关系都是:第一个背景层级最高,依次往后下降,最后一个层级最低,在最下面显示。

目前浏览器的支持情况是:

Mozilla Firefox (3.6+),
Safari/Chrome (1.0/1.3+),
Opera (10.5+) 和 Internet Explorer (9.0+)