CSS知识之 background-size 用法详细介绍

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

 

转载于:https://www.cnblogs.com/lvmylife/p/5546751.html