CSS background-size

142次阅读
没有评论

共计 673 个字符,预计需要花费 2 分钟才能阅读完成。

css background-size 定义与用法

background-size 属性指定背景图片大小。

默认值: auto
继承: no
版本: CSS3
JavaScript 语法: object object.style.backgroundSize="60px 80px"

 

css background-size 语法

background-size: length|percentage|cover|contain;

 

描述
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 "atuo(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 "auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

 

css background-size 浏览器支持

CSS background-sizeCSS background-sizeCSS background-sizeCSS background-sizeCSS background-size

IE9+, Firefox 4+, Opera, Chrome, 和 Safari 5+ 支持 background-size 属性。

 

css background-size 实例

指定背景图像的大小:

div{background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

在线运行

 

更多实例

拉伸背景图像
拉伸背景图像完全覆盖内容面积。

四个背景图像图像横向拉伸
拉伸 4 个横向背景图片。

 

 

正文完