语法:
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 | ||||
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Background-size</title> </head> <body> <div style="border: 1px solid #CCCCCC; padding:90px 5px 10px; background:url(http://webteam.tencent.com/wp-content/themes/teamblog/img/gg.png) no-repeat ; -webkit-background-size: 100% 80px; -o-background-size: 100% 80px; ">这里的 <code>background-size: 100% 80px</code>。 背景图片将与DIV一样宽,高为80px。</div> </body> </html>