前面我写到了CSS中背景属性的巩固记录，这个主要是CSS2中的一些属性，但是在CSS3中，新增了很多非常优秀的属性。甚至可以使用CSS3完成一些不可思议的样式，我在近期的一个项目学习中就发现一个用CSS3背景属性做的完美自适应的图片，让图片保持完全不变形的做法。

background-size

规定背景图像的尺寸的一个CSS属性，用这个属性可以完成上面说的完美自适应图片，让图片完全不变形。看看属性值：

cover ；这个属性定义背景图片的尺寸为完整适应到父级别尺寸！并且实现完美自适应到外层尺寸保持不变形！会自动隐藏掉不规格尺寸中的内容！

contain ；这个属性定义背景图片的尺寸完全适应到父级别尺寸，但是并不能实现尺寸跟父级层比例一直，也就是无法让完美显示到外层中！

百分比和PX；这个感觉作用不大，格式为：100px 50px ，50% 100%。px设定背景图像的具体尺寸（会变形）。百分比是用父级宽高的百分比来定义图像大小

background-size完美自适应效果案例

<style>
    .box{
        width: 100%;
        background-color: teal;
    }
    .box1{
        float: left;
        width: 32%;
        height: 300px;
        background-repeat: no-repeat;
        margin: 5px;
        background-position: center;/*居中定位*/
        background-size: cover;/*完美自适应*/

    }
</style>
    <h1>background-size完美自适应效果案例</h1>
    <div class="box">
        <div class="box1" style="background-image: url(images/acr1.jpg)"></div>
        <div class="box1" style="background-image: url(images/acr2.jpg)"></div>
        <div class="box1" style="background-image: url(images/acr6.jpg)"></div>
    </div>