008——背景（background）

背景经常会被用到，重点。

一、背景的几个属性

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动

其中背景位置中属性值用英文，有left、right、center、top、bottom，如果方位名字只写一个，另一个默认为center。还可以用精确坐标——像素值。在页面坐标中x轴是向右为正，y轴是向下为正。对于混搭，也是可以的，两个属性值一个为英文单词，另一个为像素值。

background-attachment 默认值为scroll，滚动的。还有一个属性值fixed，固定的。背景时候随着滑轮滚动而滚动。

二、背景的简写

background: transparent url(路径) repeat-y scroll 50% 0;

分别为：背景颜色  背景图片位置  背景平铺  背景滚动  背景位置

三、背景透明

background: rgba();

通过一个rgba的最后一个透明度确定背景的透明度。

四、背景缩放

①

background-size: 宽度 高度;//属性值是像素 

尽量只改一个值，胖纸缩放失真扭曲。

②

background-size: 50%;

将背景图片缩放到一半的大小。

③

background-size: cover;

会自动调整缩放比例，保证图片始终填充背景区域。如有溢出则会被隐藏。图片可能会溢出一部分

④

background-size: contain;

自动缩放比例，保证图片始终完整显示在背景区域。背景图片必须完整显示在背景中。如果盒子宽度或高度与背景图片的宽度与高度，其中一项值相同，那么图片就不缩放了。

五、多背景

background: url(images/1.jpg) no-repeat left top,
            url(images/2.jpg) no-repeat left bottom;

后面的背景在前面的背景的下面。有几个要点：

    ①  一个元素可以设置多重背景图像；

    ② 等组属性间使用逗号分隔；

    ③ 如果设置的多重背景图之间存在着交集（即重叠关系），前面的背景图会在后面的背景图之上。

    ④ 为了避免背景色将图片盖着，背景色通常都定义在最后一组上。