在CSS3中使用多背景_HTML5中文网 - 我们以促进HTML5在中国的普及而努力
2014-01-10 12:54:56
[小 大]
已经帮助：人解决问题
刚在国外一网站上面看到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设置多个背景是挺方面的。
(责任编辑：admin)
（责任编辑：）
