刚在国外一网站上面看到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)