background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结。 一、最基本的情况是指定一张图片的url作为背景:<style> .pare ...
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中:
代码如下:
.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
(#换成@)。