CSS之background深度详解

background 是CSS中一个常用的属性，用来修改某个元素的背景；

background 拥有8种属性，分别为：

1. background-color
2. background-position
3. background-size
4. background-repeat
5. background-origin
6. background-clip
7. background-attachment
8. background-image

1.background-color

background-color是我们在开发过程中经常会用到的属性，这里就不在详细介绍；

用法：
background-color : #EEE;

---

2.background-image

background-image 属性为元素设置背景图像;

这里需要注意的是任何版本的IE浏览器，都是不支持inherit属性，所以在使用inherit的过程中，要注意浏览器的兼容性；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);
}

<div class="div">

</div>

这里盒子容器的宽高大于图片的宽高，则图片会平铺，直到充满整个盒子为止；

我们将盒子的宽高减小到100px,盒子的宽高小于图片的宽高，这个时候图片会剪裁，只显示图片的一部分内容；

.div{
    width: 100px;
    height: 100px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);
}

background-image：
1.如果盒子的宽高大于图片的宽高，则默认图片会在盒子中平铺，直到填满整个盒子；
2.如果盒子的宽高小于图片的宽高，则默认图片会被剪裁，只显示图片一部分；

---

3.background-size

这是CSS3中新加入的属性，用于规定背景图片的尺寸；

①设置具体的宽度

• 设置的宽高小于图片的宽高时，图片会被压缩，然后平铺压缩后的图片，直到填满整个盒子容器；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);

    background-size: 100px 200px;
}

<div class="div">

</div>

• 设置的宽高大于图片的宽高时，图片会被拉伸，然后平铺拉伸后的图片，直到填满整个盒子容器；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);

    background-size: 500px 300px;

}

<div class="div">

</div>

②设置百分比
设置百分比与设置具体的宽高类似，都会将图片按照设置的百分比进行拉伸或者压缩，然后将拉伸或者压缩后的图片平铺填满整个盒子容器；

③cover
将图片放至足够大，使得图片能够完全覆盖盒子区域，超出的部分则会剪裁；

④contain
将图片扩大到适应整个区域，宽度刚好合适 或者 高度刚好合适，然后会平铺图片，直到填满整个盒子区域；

background-size
如设置的宽高或者百分比大于图片的宽高，图片则会拉伸，然后平铺填满整个盒子；
如设置的宽高或者百分比小于图片的宽高，图片则会压缩，然后平铺填满整个盒子；
cover会将图片放至足够大，以至完全填满整个盒子；
contain会将图片放至刚好合适整个盒子的位置，然后平铺填满整个盒子；

---

4.background-repeat

background-repeat 属性定义了图像的平铺模式。

①repeat
默认将图片沿X,Y两个方向平铺，知道填满整个盒子区域；

②repeat-x
只进行横向的平铺，纵向则不平铺；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);

    background-repeat: repeat-x;                
}

<div class="div">

</div>

③repeat-y
只进行纵向的平铺，而横向则只显示一次，不进行平铺；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);

    background-repeat: repeat-y;                
}

<div class="div">

</div>

④no-repeat
只显示一次，不在任何方向上进行平铺；

.div{
    width: 500px;
    height: 500px;
    border: 2px solid #CCC;
    background-image: url(img/itpx.png);

    background-repeat: no-repeat;               
}

<div class="div">

</div>

⑤inherit
从父元素继承background-repeat属性
这里需要注意的是任何版本的IE浏览器，都是不支持inherit属性，所以在使用inherit的过程中，要注意浏览器的兼容性；

---

未完待续·····