你的位置:首页 > 软件开发 > 网页设计 > background复合属性详解(上):background

background复合属性详解(上):background

发布时间:2015-12-15 13:03:24
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结。 一、最基本的情况是指定一张图片的url作为背景:<style> .pare ...

background复合属性详解(上):background

background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3

中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结。

 

一、最基本的情况是指定一张图片的url作为背景:

<style>  .parent{      height:200px;   width:500px;   border: 10px solid rgb(125, 125, 123);   background-color: #bff;   background-image:url(halfRombes.png);  }</style>
在CSS3稳定版草案中对多图片背景制定了规范: background-image属性可以通过","来分隔多个图像url设置多个背景图像。

每一个图像背景就创建了一个背景层(background layer),有几个背景图片就定义了几个层。background-image图片列表中第一个图像离用户最近,最后的图像离用户最远,background-color在离用户最远的背景图像下面,border-color和border-image在第一个背景图像上面,类似ps中的图层的概念。

当然最关心的还是浏览器的支持情况,让人放心的是chrome,firefox,ie9+,移动终端浏览器都支持多背景图片。

 

好了好了,废话有点多,还是例子更直观:

接下来我会用到4张图(halfRombes.png, MicrobiaMat.png, Stairs.png, Stars.png),按顺序添加到background-image中:

    background复合属性详解(上):background     background复合属性详解(上):background     background复合属性详解(上):background    background复合属性详解(上):background

代码如下:

.parent{      height:200px;   width:500px;   border: 10px solid rgb(125, 125, 123);   background-color: #bff;    background-image:url(halfRombes.png), url(MicrobiaMat.png), url(Stairs.png), url(Stars.png);   background-position: left top, right bottom, right top;   background-repeat: no-repeat, repeat-x;}

原标题:background复合属性详解(上):background

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录