css3入门

在CSS3中使用多背景

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

刚在国外一网站上面看到CSS3中可以设置多个背景图片。。像看一下格式怎么写吧。 #sfondi_multipli{ background:url(sfondo1.jpg)no-repeattopright,url(sfondo2.jpg)repeat-xbottom; } 第2行中属性:background,中间

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

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

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

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


其中用到的背景图片有:

ucello.jpg

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

cielo.jpg
 

CSS3代码如下:
 

  1. #sfondi_multipli{  
  2. width:400px;  
  3. height:150px;  
  4. border:2px solid #CCC;  
  5. background:  
  6. url(ucello.jpg) no-repeat 30px top,  
  7. url(lumaca.jpg) no-repeat right 105px,  
  8. url(logo.jpg) no-repeat 60px 55px,  
  9. url(fiore.jpg) no-repeat 5px 55px,  
  10. url(erba.jpg) repeat-x bottom,  
  11. url(cielo.jpg) repeat-x top;  


 

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

(责任编辑:admin)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
-