CSS 背景

简述

　　通过CSS背景属性，可以给页面元素添加背景样式。

　　背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

　　background-color可以设置背景颜色值。属性值为transparent代表是透明，也可以设置其他格式的颜色。

背景图片

　　background-image用于设置背景图片，优点是便于控制图片位置。实际开发中常见于logo和一些超大图片的使用。

 　　none代表没有背景图片，注意有背景时记得把url()写上，例如：

背景平铺

　　如果我们的盒子比背景图片要大，则背景图片就会自动进行背景平铺。

 　　background-repeat可以对背景平铺进行设置，有四个取值：repeat、no-repeat、repeat-x、repeat-y。

　　分别是：背景平铺、背景不平铺、向x轴平铺、向y轴平铺。

背景方位

　　如果我们通过src插入图片，图片的位置是很难控制的。

　　但如果通过background-image方式设置背景图片，图片的位置就可以很容易地控制。

　　可以通过background-position值改变图片在盒子的位置

 　　参数代表的是图片的x坐标和y坐标，可以使用方位名词和精确单位。

　　•如果参数是方位名词，则两个词前后顺序无关，比如left top和top left是一致的，如果只指定了一个方位名词，第二个值默认居中对齐。

　　•如果是精确单位，那么第一个肯定是x坐标，第二个是y坐标，如果只指定了一个数值，另一个默认垂直居中。

　　•参数也可以是混合单位，第一个值为x坐标，第二个是y坐标

背景附着

　　background-attachment设置背景图像是否固定或者随着页面其他部分滚动，background-attachment后期可以制作视差滚动的效果。

　　默认为scroll指滚动，fixed指固定。

背景复合写法

　　和font属性一样，背景也提供连写的方式节约开发工作量。

　　一般约定的顺序是：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景颜色半透明

　　通过rgba的设置可以达到背景颜色半透明的效果。

　　rgb就是红绿蓝，a对应就是alpha透明度的简写，取值范围在0~1之间。

　　注意这里的透明指的是盒子背景的半透明，盒子里的内容不受影响。