background-size

  • 版本:CSS3
  • 2018.3.14

语法:

background-size<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值auto

适用于:所有元素

继承性:无

动画性:是,除非使用值为关键字

计算值:指定值

媒 体:视觉

取值:

<length>
用长度值指定背景图像大小。不允许负值。
<percentage>
用百分比指定背景图像大小。不允许负值。
auto:
背景图像的真实大小。
cover:
将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain:
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

说明:

定义背景图像的尺寸大小
  • 该属性接受1~2个参数值(covercontain关键字只接受一个)。如果提供两个,第一个用于定义背景图像宽度,第二个定义高度;只提供一个,该值用于定义背景图像的宽度,高度将依据图像宽度定义进行等比缩放计算得到。
  • 当属性值为百分比时,参照背景图像的background-origin区域大小进行换算(而不是包含块大小)。

    百分比参照计算:

    .demo {
    	width: 200px;
    	height: 200px;
    	padding: 20px;
    	background-image: url(test.jpg);
    	background-repeat: no-repeat;
    	background-size: 50% 50%;
    }

    因为background-origin的默认值为padding-box(即包含padding),所以此时,背景图像的计算值为:120px 120px

    改变background-origin的取值:

    .demo {
    	background-origin: content-box;
    }

    由于将background-origin设置为了content-box(即内容区域),所以此时,背景图像的计算值为:100px 100px

  • 对应的脚本特性为:backgroundSize

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
Multiple background size 8.0
9.0+

示例:

关注编程学问公众号