background-size
是CSS3新增的比较实用的属性,使用它可以随心所欲地控制背景图的显示大小,而在css2中背景图的大小是不可控制的。
基本语法:
-
用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto;
-
初始值:auto;
- <length>由浮点数字和单位标识符组成的长度值,不可以为负值;
-
<percentage>取值0%都100%之间的值;
-
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
-
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
- 兼容性:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
例一:
图片默认宽度:200*160px
div{ width: 400px; height: 260px; border: solid 1px red; margin: 60px auto; background: url('images/img00.jpg') no-repeat; background-position: 0% 0%; background-size: auto auto;}
例二:background-size: 25%
例三:background-size: 150px 100px
例四:background-size: cover
例五:background-size: contain