例
指定背景图像的尺寸:
div
{
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
试一试» 更多"Try it Yourself"下面的例子。
定义和用法
背景-size属性指定背景图像的大小。
默认值: | auto |
---|---|
遗传: | no |
动画: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript语法: | object .style.backgroundSize="60px 120px" Try it |
浏览器支持
在表中的数字规定,完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-,-moz-,或-O-指定用一个前缀工作的第一个版本。
属性 | |||||
---|---|---|---|---|---|
background-size | 4 1.0 -webkit- | 9 | 4 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10.0 -O- |
CSS语法
background-size: auto|length|cover|contain|initial|inherit;
属性值
值 | 描述 | 播放 |
---|---|---|
auto | 默认值。 背景图像包含其宽度和高度 | 播放 ” |
length | 设置背景图像的宽度和高度。 第一值设置宽度,所述第二值设定的高度。 如果只给出一个值,二是设置为"auto" | 播放 ” |
percentage | 设置背景图像的在父元素的百分比的宽度和高度。 第一值设置宽度,所述第二值设定的高度。 如果只给出一个值,二是设置为"auto" | 播放 ” |
cover | 缩放的背景图像,使背景区域由背景图像完全覆盖要尽可能大。 背景图像的某些部分可能不是针对背景定位区域之内的 | 播放 ” |
contain | 缩放图像的最大尺寸,使得它的宽度和高度都可以容纳在内容区域内 | 播放 ” |
initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
例
伸展的背景图像完全覆盖内容区域:
div
{
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
试一试» 相关页面
CSS3教程: CSS3背景
HTML DOM参考: backgroundSize property