结合实践再认识background

background为css的一个基本属性，使用频率很高，可以设置背景色、背景图片。

background是一个复合属性，为几个属性的缩写形式。缩写格式为：background:color img position/size repeat attachment clip origin。

接下来，着重结合实践经验来选择性的介绍其中几个属性：

一、background-position

这个属性在background使用中必备，定义了背景图片的定位位置。属性值有好几种方式：固定值、百分值以及方位值（如left/bottom）等。但不同值表达的意思不尽相同。

1、固定值：如 background-position:10px 10px,表示元素区域中该点为背景图片定位的起始点，即图片左上角与该点对齐定位。

2、百分比：百分比是相对于元素宽高的百分比，该值表示背景图片的对应点与元素区域的对应点对齐来定位（而非背景图片的左上角与元素百分比点的对齐）。

3、方位值：left/top等方位值，指的是背景图片的相应轴线与元素的相应轴线对齐。如background-position:left center表示背景图片的左轴、中轴分别与元素的左轴、中轴对齐。

二、background-attachment

background-attachment描述了背景图片随着元素滚动的滚动情况。默认值为scroll，即背景图片随着元素的滚动而滚动。

另外一个值为fixed，表示背景图片不随元素的滚动而滚动。实际上，fixed定位的背景图是相对于浏览器窗口定位的，与元素的position:fixed类似。并且fixed背景的百分比定位是相对于窗口宽高的百分比，与元素大小已经没有了关系。

在元素中固定定位背景图片，则背景图片仅在该元素区域内能看到。根据该原理，可以制作炫酷的视差滚动效果。遗憾的是，fixed定位在移动端支持性不好，所以在移动端要实现类似的视差滚动的话，只能另辟蹊径，方法有很多，其中，可以用固定定位的元素来模拟固定定位的背景图片以实现效果。

三、background-size

该属性为css3属性，ie低版本不支持，其他浏览器也需选择性的加浏览器前缀来兼容。

background-size:cover是用的比较多的属性，将背景图片等比缩放来铺满元素区域。

实践中踩过不少坑，做下总结：

1、body元素设置background-size:cover时，body高度大于窗口高度，但背景图片仅仅铺满了窗口，但没铺满窗口以外的body区域。

很坑爹……经过很大周折，终于搞明白了，原来与html元素有关：

（1）当html设置了高度（如100%），则背景是相对于html区域来cover的，不再是body区域；

（2）当html不设置高度，此时，背景cover区域正常，是相对于body的。

（3）当html设置了背景色，无论有没有设置高度，则body的背景cover是在body区域内进行的，不再受html影响。

2、cover虽然意味着背景图片铺满元素区域，但也不总是这样，会受到background其他属性background-position的影响。当background-position的值为固定值时，如background-position:10px 10px，则背景图片是以该点为起始点来进行平铺的，该点以上以左的区域是覆盖不到的。当“background-position:-10px 0”时，覆盖区域大小仍等于元素大小，但是因起始点偏离了元素左侧10px，故元素最右侧10px宽的区域被覆盖不到，相当于cover的背景图片向左侧移动了10px，有10px宽被移到了元素的外部。

总之，background各属性间是相互影响的，使用时应多加注意。主要每个属性都掌握了，复合应用时也就不容易出问题了。

在项目中会遇到各种各样的问题，事无巨细，多总结多积累~