背景属性

background属性用于设置盒子的背景颜色或者背景图片。

background是一个复合属性。backgorund: color image repeat position/size attachment ;

1. background-color

背景颜色值。

背景色默认是会延伸到border下方的：

<style>
  #wrap{
    width: 100px;
    height: 100px;
    background-color: #ff6600;
    border: 10px dashed #000;
  }
</style>
<div id="wrap"></div>

2. background-image

插入背景图片

/* case 1 : 不插入背景图 默认 */
div{ background-image: none; }

/* case 2 : 插入背景图 */
div{ background-image: url("路径"); }

同上，背景图片默认也是会延伸到border下方的。

• 背景与内容的层叠关系3D示意图

  

3. background-repeat

背景图片平铺方式

/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }

/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }

/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }

/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }

4. background-position

设置背景图片位置；

background-position:X Y; X和Y默认是：0 0

如果只给一个值，那么第二个值默认center（50%）;

X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。

5. background-size

设置背景图片的尺寸；（CSS3新增属性，需要浏览器的支持，这个网站可以查询兼容性：caniuse (opens new window)）

通常用于在不改变图片宽高比的情况下，铺满盒子。

background-size:X Y; X和Y默认和原图 宽 高 对应，同时X Y可以是自己设定的百分比或像素

background-size:cover; 等比例缩放直到铺满X轴和Y轴；

background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

6. background-attachment

background-attachment：scroll; 默认值，背景随滚动而滚动；

background-attachment: fixed; 背景不随滚动而滚动

7. 其它不常用CSS3新增背景属性

• background-clip

  背景（颜色/图片）的显示是会延伸到border区域的，clip可以用于设置背景延伸到哪个位置，把不需要的部分剪裁掉。

  background-clip: border-box; 默认值，延伸到border位置

  background-clip: padding-box; 只延伸到padding位置，剪裁掉border部分的背景内容

  background-clip: content-box; 只延伸到内容部分，剪裁掉padding和border部分的背景内容

• background-origin

  背景的起点位置默认是border的左顶点，origin可以设置背景的起始位置。这个属性通常用来控制背景图片的起始位置，因为背景颜色不管从哪里起始都是一个颜色看不出什么变化。

  backgruond-origin: border-box; 默认值，以border左顶点作为背景起点

  background-origin: padding-box; 以padding左顶点作为背景起点

  background-origin: content-box; 以内容部分左顶点作为背景起点

• 多背景图的写法

  background:
    url("1.jpg") no-repeat right bottom, 
    url("2.jpg") no-repeat right top;

8. 背景图片和img标签对比

• 背景图片不占用content内容部分，而img标签会占用。
• 背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。

如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。

如果是确却的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。