CSS3在线中文参考指南 - background-size » 张鑫旭-鑫空间-鑫生活

您尚未登录，无法添加相关文章。 - 登录

新用户？

哎呀，出了点小问题，您可以稍后重试！

未填写内容或格式不正确！

CSS3 background-size使用参考指南

浏览：57304次

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法：

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

相关属性： background-clip | background-origin

取值：

<length>：: 由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>：: 取值为0%到100%之间的值。不可为负值。

说明：

设置背景图片的大小。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

引擎类型	Gecko	Webkit	Presto
Background-size		-webkit-background-size	-o-background-size

兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(√)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4
	(×)IE8	(×)Firefox 3.5
	(√)IE9	(√)Firefox 3.6

代码与实例

CSS代码：

.background_size{
    width:200px;
    padding:100px 0 10px;
    background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat;
    -webkit-background-size:100% 90px;
    -o-background-size:100% 80px;
}

HTML代码：

<div class="background_size">背景图片大小被拉伸（宽度100%，高度80px）</div>

效果截图

查看demo原页面>>

拓展知识点（由各前端同仁提供）

知识点(1) 提供者：张鑫旭最后编辑：show[编辑本段]

background-size中有个cover属性，此属性有高度或宽度100%拉伸的效果，也就是容器多大，背景图片最短的那一边就会拉伸多大。

例如下面的代码：

body{

background:url(http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg) no-repeat center center fixed;

-moz-background-size:cover;

background-size:cover;

background: #24A1FF;

}

</style>

所实现的效果就是一张原本宽度为512像素的张含韵mm的照片满屏于浏览器拉伸显示了。

要查看上述代码的效果，您可以狠狠地点击这里：[a=http://www.zhangxinxu.com/study/201007/css3-background-size-cover-test.html]张含韵mm照片满屏拉伸demo[/a]

此效果在目前的Firefox/Chrome/Opera/Safari下都可以看到，IE浏览器一向蛋疼的。 background-size中有个cover属性，此属性有高度或宽度100%拉伸的效果，也就是容器多大，背景图片最短的那一边就会拉伸多大。