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

1、属性分开写

例子如下:

#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、简写

例子如下:

#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+)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

作者

admin@wordpress.com

相关文章

css3文字阴影

在css3中,可以用text-shadow来...

读出全部

长英文、数字字符的自行换行

长英文、数字字符的自行换行是一个老生常谈的话...

读出全部

图文自适应布局

有时,我们在做项目时,会遇到这样一种情况——...

读出全部

伪类与伪元素的区别

在css2中对它们的定义如下: 伪元素:伪元...

读出全部