CreateTime--2017年12月26日14:51:21
Author:Marydon
background-image
1.background-image:url()
作用：设置背景图片
语法：
background-image:url(path)
说明：
path既可以是相对路径又可以是绝对路径，不需要添加单引号，即url('path')
2.background-image:linear-gradient()
参考链接：http://www.css88.com/book/css/values/image/linear-gradient().htm
作用：设置线性渐变背景色
语法：
background-image:linear-gradient(direction, color1, color2);
第一个参数：angle
用途：表示渐变的方向，
对应参数值：可以使用角度值或者关键字（角度）来设置
参数值说明：
使用角度值表示时，单位为：deg；
to left：设置渐变为从右到左。相当于: 270deg；
to right：设置渐变从左到右。相当于: 90deg；
to top：设置渐变从下到上。相当于: 0deg；
to bottom：设置渐变从上到下。相当于: 180deg。
对角线方式渐变
to top left：渐变方向右下-->左上
to top right：渐变方向左下-->右上
to bottom left：右上-->左下
to bottom right：左上-->右下
第二个参数
用途：渐变色的起始颜色
对应参数值：格式为 color [px|percent]
参数值构成说明：
color：取值范围为[#000000,#FFFFFF]；
中间是空格；
px|percent：像素或百分比，用长度值指定起止色位置，不允许负值|用百分比指定起止色位置。
第三个参数
用途：渐变色的结束颜色
其余同上
说明：
表示颜色的参数至少要有两个，当需要多种颜色时，可以添加多个颜色参数；
当不指定起止位置时，颜色会默认进行均匀分配。
举例：
参考地址：http://blog.csdn.net/qq_18661257/article/details/50640633
不指定比例（均匀分配）
.style3{ background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033); }
<div style="200px;height:200px;" class="style3"></div>
效果展示：
指定比例（不均匀自主控制渐变）
.style3{ background-color:#33CC99; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }
说明：
第一个rgba(255,255,255,.15) 25%，说的是从左下角开始起到25%为rgba(255,255,255,.15)，这里默认隐藏了起始点的设定；
然后transparent 25%到50%是透明的(transparent)；
25%到75%为rgba(255,255,255,.15)这个颜色；
从75%到100%为transparent，这里又省略了一个100%，他是默认值；
这代码直接使用时没有什么效果的，他必须有背景颜色做衬托。
效果展示：
说明：
这是css3的语法，IE6.0-9.0使用私有滤镜来实现该效果，详情请移步至文章：css 滤镜之Gradient