背景

大小覆盖顺序依次为： 内容区=>padding=>背景图=>border=>外边距
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-clip/origin/break
linear-gradient
radial-gradient
多背景图片／简写属性

1、background-color

2、background-image

background-image:url(images/url.png)

3、background-repeat

有以下属性值：
repeat
no-repeat
repeat-x
repeat-y
默认值为repeat

4、background-position

(1) 关键字值：
top
left
bottom
right
center
顺序不重要，任意两个组合起来都可作为该属性的值，如果只设定一个值，另一个取相同的值。
left top 元素的左上角和背景的左上角对齐
center center 元素的中心点和背景的中心点对齐
right bottom 元素的右下角和背景的右下角对齐
(2) 数字值
水平 垂直 如果只设定一个值，另一个为center。
水平数值距离的计算：
（元素宽-图片宽）*水平数值，
垂直距离的计算类似。
因此background-position:50% 50%和center center的效果相同。

5、background-size

background-size是css3中规定的属性。
(1) 百分值：相对于填充的元素的大小。
(2) 数值：缩放到指定的大小。
(3) cover：拉大图片，使其完全填满背景区，保持宽高比，可能发生裁剪。
(4) contain：缩放图片，使其桥好适合背景区，保持宽高比，可能留有空白。

6、background-attachment

用于控制背景图片是否随着元素的滚动而滚动，默认值为scroll，即跟随着滚动。
fixed表示不随着元素的滚动而滚动，例如在需要给body的中心添加水印时使用fixed。

7、background(简写属性)

没有特定的顺序 如果少了哪个属性值则用默认的属性值进行代替。

8、background-clip、background-origin、background-break

background-clip：控制背景绘制区域的范围，比如可以让背景色只显示在内容区域。
background-origin：控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置。
background-break：控制分离元素（比如跨越多行的行内盒子的显示效果）

9、多背景图片

css3还可以给元素背景添加多个背景图片。
只需要给background写多个合并属性，使用逗号隔开即可。

10、背景渐变

(1) 线性渐变

a. 默认的线性渐变是从上到下的渐变
background:linear-gradient(#e86a43,#fff)
b. 如果想让渐变从左到右可以增加方向
background:linear-gradient(left,#64d1dd,#fff)(45度方向使用-45deg)
c. 渐变点设置
可以在想添加渐变点的地方，在颜色后面添加空格，写明位置（百分比）即可。
e.g.

.gradient1{
    background:linear-gradient(#64d1dd,#fff 50%,#64d1dd);
    //background:linear-gradient(#e86a43 20%,#fff 50%,#e86a43 80%);
}

(2) 放射性渐变

可以设置渐变中心点的位置,circle使渐变变的更加自然。
e.g. 50px 30px circle

.gradient1{
    background:radial-gradient(#fff,#64d1dd,#70aa25);
    //background:linear-gradient(circle,#fff,#64d1dd,#70aa25);
    //background:linear-gradient(50px 30px,circle,#fff,#64d1dd,#70aa25);
}