最近我在掘金上查阅资料（摸鱼）的时候，发现了一篇神文，瞬间就裂开了，啥？？？？ background-image 竟然可以玩出花来！真·花，原文在这，瞅瞅大神是如何把css的背景图玩出花的。于是乎，我也有许多奇思妙想想去试验，甚至想直接在背景图里直接撸出一个清明上河图~
咳咳，能不能撸个清明上河图出来留个悬念，接下来我们一起来探究以下背景图到底是何方神圣：
啥是 background-image ?
- 你：老师！这个我知道，不就是给
html元素设置背景图吗？ - 老师：能举个例子吗？
- 你：background-image: url('美女.jpg')
- 老师：还有吗？
- 你：没了~
相信很多小伙伴平时用到最多的也只是这一种用法。查了一下文档，
background-image还有其他n种用法:
- linear-gradient()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- conic-gradient() 今天首先来介绍第一个：线性渐变
线性渐变 linear-gradient()
语法：
background-image: linear-gradient(direction, color1 stop1, color2 stop2, ...)参数说明：
direction（可选）:- 关键字型（8种，8个方向）
to bottom从上到下（默认）to top从下到上to right从左到右to left从右到左to right bottom从左上到右下（这里关键字不分先后，也可写成to bottom right，以下同理）to left bottom从右上到左下to right top从左下到右上to left top从右下到左上
- 数值型（角度）任意角度
xdegx∈(-∞,+∞)0deg相当于to top90deg相当于to right180deg相当于to bottom270deg相当于to left
- 关键字型（8种，8个方向）
color1颜色1（必填）red、blue ...#123456、#abcdef ...rgb(0, 1, 2)、rgba(9, 8, 7, .6)...- 其他合法颜色值
stop1颜色1到哪里停止（选填）- 仅支持百分比 （数值大小不一定要从小到大！！！）
color2颜色2（必填）同上stop2颜色2到哪里停止（选填）同上...至少2种颜色
先从最简单的例子开始（两种单色的渐变）：
div {
width: 300px;
height: 200px;
background-image: linear-gradient(red, yellow);
}
我们注意到这边第一个参数direction没写，但是他默认是从上到下的，也就是to bottom，我们试着修改它的填充方向为向右填充，效果如下：
background-image: linear-gradient(to right, red, yellow);
我们会想，填充的方向是否可以任意方向，答案是肯定的，我们试着让填充方向为斜向上60度，为了让效果看得更明显，多加了几种颜色：
background-image: linear-gradient(30deg, red, orange, yellow, green, cyan, blue, purple);
以角度来定义 direction 时，要注意起点是从y轴正方向顺时针开始的，所以上面的代码写的是30deg,跟我们想象的不太一样。下面这个图可以辅助理解：
我们看到上面的渐变每种颜色是方式平均分配到背景里的，我们就会想，能否随意设置配色比例？of course!!!先上效果：
background-image: linear-gradient(red 10%, green 20%, purple 50%);
我们这里给每种颜色加了停止的百分比，意思是当前渐变效果到这里结束，下个渐变效果从这里开始。啥意思呢，解释起来就是从红色开始填充，到10%的位置停止填充红色（我们看到图中前10%是纯色的红色就是这个原因）；接着以红色开始以绿色结束的渐变，到20%的位置结束（红色的生命周期结束了）；接着以绿色开始紫色结束的渐变，到50%的位置结束（绿色的生命周期结束了），之后的50%以紫色开始，没设置结束位置，即以当前色值结束，所以看到后面50%全是紫色...。
根据这个理解，我们绘制一个1：2：3：4的不带纯色块的渐变效果：
background-image: linear-gradient( red, black 10%, yellow 30%, white 60%, purple);
最后画一个海上日出：
div {
width: 300px;
height: 200px;
background-image: linear-gradient(180deg, red 20%, orange, yellow 50%, green, cyan, blue 40%, purple);
}
emmmmm~太阳是怎么画出来的？？？咱们下回分解
完结！撒花~
