在CSS3中使用多背景

刚在国外一网站上面看到CSS3中可以设置多个背景图片。。像看一下格式怎么写吧。

#sfondi_multipli{  
background:url(sfondo1.jpg) no-repeat top right, url(sfondo2.jpg) repeat-x bottom;  
}

第2行中属性:background，中间用,逗号隔开了，可以看到设置有两个背景图片，而不再像CSS2中定义一个背景图片就要用一个background属性。CSS3是越来越强了啊。。

我们现在来看一个实例：
实例效果图：

其中用到的背景图片有:

ucello.jpg

lumaca.jpg
logo.jpg
fiore.jpg
erba.jpg

cielo.jpg

CSS3代码如下:

#sfondi_multipli{  
width:400px;  
height:150px;  
border:2px solid #CCC;  
background:  
url(ucello.jpg) no-repeat 30px top,  
url(lumaca.jpg) no-repeat right 105px,  
url(logo.jpg) no-repeat 60px 55px,  
url(fiore.jpg) no-repeat 5px 55px,  
url(erba.jpg) repeat-x bottom,  
url(cielo.jpg) repeat-x top;  
}

可以看到使用多CSS3中的background设置多个背景是挺方面的。

【在CSS3中使用多背景】相关文章

1. 在CSS3中使用多背景

2. CSS3系列教程:背景图片(背景大小和多背景图)

3. CSS3边框背景-边框背景(-border-image)

4. 在IE中使用高级CSS3选择器

5. 网站设计中使用CSS的注意事项

6. 网站设计中使用CSS的注意事项

7. HTML5手机浏览器酷炫应用多视角揭秘

8. 解析中文字体在CSS中的表达方式

9. CSS3中的5个有趣的新技术

10. CSS3中可自动换行而不再会撑破容器