在CSS3中,我们可以为元素设置多背景图片。所谓“多背景图片”,指的该元素的背景图片不止一张。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:400px; height:200px; border:1px solid silver; background:url(img/frame1.png) bottom left no-repeat, url(img/frame2.png) top right no-repeat; } </style> </head> <body> <div></div> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,我们使用了下面两张图片作为背景图片,其中左下角是一张图片,右上角是一张图片。

background:url(img/frame1.png) bottom left no-repeat, url(img/frame2.png) top right no-repeat;

background是一个复合属性,上面代码其实等价于:

background:url(img/frame1.png), url(img/frame2.png); background-position: bottom left, top right; background-repeat:no-repeat, no-repeat;

在实际开发中,我们并不建议使用多背景图片,而是应该制作一张复合图片来实现。因为多一张图片就会多引发一次HTTP请求,影响页面加载速度。