研究下CSS3的background-size属性

最近项目正好有用到CSS3的background-size属性，就抽空的研究下。以前网站很少会使用到这个属性，背景图片和父元素的宽高都是固定的，主要是因为以前网站只在PC上显示所以都采用固定式布局！但是现在的网站都要考虑在多种设备（比如手机、平板）上如何较好的显示，这样就需要背景图片的尺寸能够灵活的进行改变，使用background-size属性可以在某些方面简单的处理这类问题。

先看下W3C对此属性的语法说明：

从上图中可看出此属性一共有4种类型的属性值：length（设置尺寸）、percentage（百分比）、cover（扩展覆盖）、contain（自动缩放到适应）。下面会对这四种属性值类型进行测试和说明。

这是演示中使用的背景图片bg-earth.jpg，宽高为200px*199px：

演示代码中的背景图片父元素宽高都固定为400px*200px。父元素的样式如下：

<style type="text/css">
    .container {
        width: 400px;
        height: 200px;
        background-image: url(bg-earth.jpg);
        background-repeat: no-repeat;
        border: 3px solid #0000ff;
    }               
</style>

设置固定尺寸的背景图片（length）

这里展示两种尺寸的来进行对比，首先是800px*300px：

<div class="container" style="background-size: 800px 300px;"></div>

背景图片尺寸超出了父元素的最大尺寸，导致超出部分被隐藏，图片也变形了。然后看下设置尺寸为100px*200px：

<div class="container" style="background-size: 100px 200px;"></div>

背景图片宽度小于父元素，所以被压窄了。

背景图片的宽高是根据父元素的宽高以百分比进行缩放（percentage）

这里同样使用两种不同百分比进行对比，先看下设置成百分百的：

<div class="container" style="background-size: 100% 100%;"></div>

可以看到正好填满整个父元素，接下来看使用宽50%，高60%进行缩放：

<div class="container" style="background-size: 50% 60%;"></div>

背景图宽=父元素的宽*50%，高=父元素的高*60%。

背景图片扩展并覆盖填充满整个父元素（background-size:cover）

先看下演示代码和结果图：

<div class="container" style="background-size: cover;"></div>

使用cover会有很多种情况，但可以肯定的是，cover一定会将背景图片覆盖满整个元素，无论背景图的大小如何。

如果背景图片的宽度小于父元素宽度，则图片宽度进行压缩，反之则进行拉伸，高度也是一样的。所以如果尺寸差别太大会造成图片严重变形，但是好处就是被填充的元素背景会没有空白。

此外注意一点，背景图超出父元素的备份会被隐藏掉。

背景图片尺寸宽度和高度完全适应内容区域（background-size:contain）

其实就是背景图会根据自身的宽高比例进行缩放，好处是图片不会严重变形，造成太扁或者太窄，但是缺点也很明显，很容易导致背景有空白。演示代码：

<div class="container" style="background-size: contain;"></div>

可以看到背景图片是完全没有变形的，依然按照本身尺寸比例进行缩小，如果父元素的宽高允许的话则会进行放大。

---

---

---