Css 3.0 : 多背景图片的运用

作者: 李嘉日期: 2009-04-26 07:51

字体大小: 小中大

最近Mozilla官方透露FireFox将支持CSS3的多背景图片( multiple background images )，Safari 1.3 开始就支持Css3.0的多背景图显示，所以Firefox将成为继Safari之后第二款支持同一容器多背景的浏览器。

Css 3.0允许一个容器对象中设置多个背景图片，要做到这一点，你只需要在css中使用逗号隔开每一个背景图片，例如：

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

这里有一些例子：实例1、实例2。(注:IE可能看不到效果)

以下是个比较通用的写法：

div.test {
	background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000000;
}

OK, 目前IE似乎还没有支持这个功能，希望Css3能更快被所以浏览器所支持。