CSS 属性篇(六)：background-size属性

1、background-size属性介绍

CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你能够随意的缩放背景图。

用法：background-size: length|percentage|cover|contain;

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

2、演示代码

背景图尺寸为220px*214px：

演示代码为：

<style>
    div{
        border: black 2px solid;
        width: 300px;
        height: 200px;
        background: url("img4.jpg") no-repeat;
    }
</style>
复制代码

3、background-size属性分析

一、设置固定尺寸的背景图片

1）、background-size: 800px 300px;

设置背景图片的宽高比与图片自己的宽高比不一样，致使图片出现变形；同时设置背景图片的尺寸远远超出了div自己定义的尺寸，超出的部分被隐藏了。

---

2）、background-size: 100px 200px;

设置背景图片的宽度远远小于自身的宽度，图片被压缩；同时小于div自己的宽度，没法覆盖所有的div，出现留白。

---

二、背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放

1）、background-size: 100% 100%;

彻底填满所属元素的区域，可是应该宽高的比例图片出现了变形。

---

2）、background-size: 50% 20%;

填充所属元素的宽*50% 高*20%的区域，图片出现变形。

---

三、背景图片扩展并覆盖填充满整个所属元素区域

1）、background-size: cover;

若是背景图片尺寸大于所属元素尺寸，则背景图片不进行方法，正常显示，超出部分被隐藏。
若是背景图片尺寸小于所属元素尺寸，则背景图片进行等比例放大 （图片不会出现变形），直至彻底覆盖所属元素区域，超出部分被隐藏。
优势是背景图片所有覆盖所属元素区域；缺点是超出的部分会被隐藏。

---

四、背景图片尺寸宽度和高度彻底适应内容区域

1）、background-size: contain;

对背景图片进行等比例的放大/缩小处理，直至背景图片可以完完整整的展现出来。
优势是图片不会出现变形，同时背景图片被彻底展现出来；缺点是当所属元素的宽高比与背景图片的宽高比不一样时，会出现背景留白。