2015-12-13复习之CSS3背景background的几个属性

background的几个属性

background-color（背景颜色）

background-image（背景图片）

background-position（背景图片位置）

background-size（背景图片大小）

background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动。）

background-repeat（背景图片重复格式）

background-origin（规定背景图片的定位区域。）

background-clip（规定背景的绘制区域。）

background-color

就不用多解释了。
background-image：

在一个元素中显示多个背景图片，可以连续写入图片路径：

background-image: url("bg.png"),url("2015.jpg");

注意用逗号分隔，先写的权重大，显示在上层。

background-position：

有多个背景图片时，可以分别设置每个背景图的位置：

background-position: right top,bottom left;
background-size：

共有4个属性值：具体像素值，百分比，cover，contain

具体的像素值和百分比  都有两个值，第二个省略不写将设为auto

cover和contain可以这样理解：

假设一幅背景图，长比较长，宽比较短，那么

cover就是按照短的进行缩放，只要短的那个方向填充完容器就好了，此时难免会有一部分图溢出而看不到

contain就是按照长的进行缩放，只要长的那个方向填充完容器就好了，此时应有一部分空隙没有被背景图填充，但是默认是格式repeat，即此时样式是重复的。

background-attachment：

默认值是scroll，随着内容滚动而滚动

当属性值为fixed时，背景图片不随内容滚动而滚动

background-repeat：
也不用多解释了

background-origin和background-clip：

详见css3之background-origin和background-clip的区别与联系