|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
破洛洛文章简介:CSS3.0对background的调剂与加强.
(注:仅对css3对background的调剂、增添的属性举行了翻译)
css3关于backgrounds做了一些修正,最分明的一个就是接纳设置多背景,不仅增加了4个新属性,而且还对今朝的属性举行了调剂加强。
1、多个背景图片
在css3内里,你能够再一个标签元素里使用多个背景图片。代码相似与css2.0版本的写法,但援用图片之间需用“,”逗号离隔。第一个图片是定位在元素最下面的背景,前面的背景图片顺次在它上面显现,以下:
background-image:url(top-image.jpg),url(middle-image.jpg),url(bottom-image.jpg);
2、新属性:BackgroundClip
此会商让我们回到文章入手下手提到的关于背景被border边框遮挡的成绩。background-clip的增加让我们完整可以把持背景显现的地位。属性值以下:
(1)background-clip:border;背景在border边框下入手下手显现
(2)background-clip:padding;背景在padding下入手下手显现,而不是border边框下入手下手
(3)background-clip:content;背景在内容地区下入手下手显现,而不是border边框下入手下手或padding下入手下手。
(4)background-clip:no-clip;默许属性值,相似与background-clip:border;
3、新属性:BackgroundOrigin
此属性必要与background-position共同利用。你能够用background-position盘算定位是从border,padding或contentboxes内容地区算起。(相似background-clip)
(1)background-origin:border;
从border边框地位算起
(2)background-origin:padding;
从padding地位算起
(3)background-origin:content;
从content-box内容地区地位算起;
background-clip和background-origin的分歧的地方www.CSS3.info网站给做了很好的剖析解说。
4、新属性:BackgroundSize
BackgroundSize属性用来重设你的背景图片。有几个属性值:
(1)background-size:contain;
减少背景图片使其顺应标签元素(次要是像素方面的比率)
(2)background-size:cover;
让背景图片缩小延长到全部标签元素巨细(次要是像素方面的比率)
(3)background-size:100px100px;
标明背景图片缩放的尺寸巨细
(4)background-size:50%100%;
百分比是依据内容标签元素巨细,来缩放图片的尺寸巨细
你能够往CSS3specifications站点看一下复杂的案例申明。
5、新属性:BackgroundBreak
css3里标签元素能被分在分歧地区(如:让内联元素span跨多行),background-break属功能够把持背景在分歧地区显现。
属性值:
(1)Background-break:continuous;
此属性是默许值,无视地区之间的距离清闲(给它们使用图片就仿佛把它们当作一个地区一样)
(2)Background-break:bounding-box;
从头思索地区之间的距离
(3)Background-break:each-box;
对每个自力的标签地区举行背景的从头分别。
6、背景色彩的调剂
background-color属性在css3版本内里略微做了加强,除指定backgroundcolor背景色彩以外,还能够对不利用的标签元素背景图片举行往色处置。
background-color:green/blue;此例子里,这背景色彩多是绿色,但是,假如底部背景图片有效的话,蓝色将取代绿色来显现。假如你没有指定某个色彩的话,它将其视为通明。
7、背景反复的调剂
css2里当设置背景的时分,它常常被标签元素截取而显现不全,css3先容了2个新属性来修复此成绩。
space:图片以不异的间距平展且添补全部标签元素
round:图片主动缩放直到顺应且添补全部标签元素
CSS3specifications网站对background-repeat:space的利用就是一个现成的例子。
8、BackgroundAttachment的调剂
BackgroundAttachment有了一个新属性值:local,当标签元素转动时它才无效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条转动的。如今,有了background-attachment:local,就能够做到让背景随元素内容转动而转动了。
中文原文:css3.0对background的调剂与加强
英文原文:BackgroundsinCSS3
</p>
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。 |
|