背景图像区域
background-clip:border-box | padding-box | content-box
border-box:背景被裁减到边框盒
padding-box:背景被裁剪到内边距框
content-box:背景被裁剪到内容框
CSS3背景图像定位（ background-origin）
----针对的左上角
background-origin属性指定background-position属性应该是 [ 相对位置 ]
*backgroung-origin设置元素背景图片的原始起始位置
*定义背景图片位置，两个值：水平和垂直偏移量
语法：
background-origin：padding-box | border-box | content-box；
background-origin：content-box；背景图像相对于内容框来定位。
background-origin：padding-box；背景图片相对于内边距来定位。
background-origin：border-box；背景图片相对于边框来定位。
兼容性
IE9+、Firefox4+、Chrome、Safari5+、Opera
背景图片大小
background-size属性：指定背景图片大小
语法：
background-size：length|percentage|cover|contain;
兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera
-------------------------------------------------------------------
background-size
只设置一个值时，第二个值默认为auto，根据图片宽度值来等比缩放
当两个值都有，按设置值大小显示图片
cover：即将背景图片等比缩放以填满整个容器，做到不留白【讲过这个元素完全填满】
contain：即将背景图片等比缩放至某一边紧贴容器边缘为止，要么宽度100%，要么高度100%【元素很可能有空隙】
多重背景图像：
CSS3允许您为元素使用多个背景图像
语法：background-image：url（img1.jpg），url（img2.png）；
元素引用多个背景图片，前面图片依次覆盖后面图
背景属性整合
background） ----
背景缩写属性可以在一个声明中设置所有背景属性
语法：background:color position size repeat origin clip attachment image
1、color 颜色2、position 位置3、size 大小4、repeat 重复与否5、origin 定位6、clip 区域7、attachment 状态是否滚屏8、image url
线性渐变语法：
background:linear-gradient(direction方向,color-stop1开始颜色,color-stop2结束色,...N个颜色);
默认方向：从上到下。
标准写法：background:linear-gradient(to-end-direction方向,color-stop1开始颜色,color-stop2结束色,...N个颜色);表示到哪里结束。
举例：to left表示到达左边，那就是从右到左的方向。
线性渐变-颜色结点
（length|percentages数值：...%）：
background: linear-gradient(angle,color1 length|percentage,color2 length|percentage,...);
第一个颜色的定位如果不写，默认0%，即从头开始渐变；最后一个颜色的定位如果不写，默认100%。
-webkit内核浏览器使用角度规则与标准不同。
-webkit内核浏览器开始角度（0度）在水平线方向，以逆时针方向。（上图）
标准的开始角度（0度）则是垂直线方向，以顺时针方向。（下图）主要区别在0度和90度上。
重复线性渐变 repeating-linear-gradient(color length/percent,color)
径向渐变属性：
从起点到终点颜色从内到外进行圆形渐变（从中间往外拉）
background:radial-gradient(center（位置，也可以用百分比和长度【如30% 70%；不能用30%,70%】）,shape size,start-color,...,last-color)
---------------------------------------------------------------
径向渐变-颜色节点均匀分布（默认）
background：radial-gradient（color-stop1，color-stop2，...）；
-------------------------------------------------------------
径向渐变-颜色节点不均匀分布
background：radial-gradient（color1 length|percentage，color2 length|percentage，...）；【百分比指的是从中心点到达指定终点的百分比】
-------------------------------------------------------------
径向渐变-设置形状
background:radial-gradient(shape,color-stop1,color-stop2,...);
形状：circle,ellipse(默认椭圆)
--------------------------------------------------------------------
径向渐变-尺寸大小关键字
background:radial-gradient(size,color-stop1,color-stop2,...);
形状和尺寸不用逗号“，”隔开
关键字说明：【尺寸不能用数值或者百分比，而是用下面这四个关键字】
closest-side:最近边【离中心点最近的边的距离和第二近的边的距离为长短轴】
farthest-side:最远边【离中心点最远的边的距离和第二远的边的距离为长短轴】
closest-corner:最近角【离中心点最近的角的距离和第二近的角的距离为长短轴】
farthest-corner:最远角【离中心点最远的角的距离和第二远的角的距离为长短轴】
重复渐变
background：repeating-radial-gradient(color1 length | percentage,
color2 length | percentage,.......);
