这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
background：混合属性
- background-image: 指定一个图片文件或渐变颜色作为背景图片
- background-position: 背景图片的初始位置
- background-size: 背景图片的渲染尺寸
- background-repeat: 在需要填充整个元素时，是否平铺图片(图片比元素小)
- background-color: 指定纯色背景，这个层在图片层下面(就是说，如果有背景图片，该属性会被遮挡)
- background-clip: 决定背景是否填充边框盒(默认值)、内边距框盒或内容盒
- background-origin: 决定背景是相对于边框盒、内边距框盒还是内容盒来进行定位(内边距框盒是默认值)
- background-attachment: 决定背景是否跟随元素上下滚动还是固定在视口，默认跟随元素上下滚动。
使用background属性时，当仅仅只指定特定的值时，其他属性默认设为默认值。
建议：当只设置特定值时，最好不要使用background简写
应用
background-image: url('xxx.png');
/* 除了url，该属性还可以接受一个渐变函数(linear-gradient)生成的渐变
linear-gradient 函数接受三个参数，分别是 1.角度 2.起始颜色 3.结束颜色
角度可以用多种方式表示，可以用deg，可以用关键字 to right; 对角也可以 to bottom right
颜色可以用多种方式去表示，hex(#000)，RGB(rgb(0, 0, 0))，或者颜色关键字*/
background-image: linear-gradient(to right, white, blue);
/* linear-gradient 我们通常只需要两个颜色节点就够了，但是这并不是说只能有两个颜色节点，如果
你愿意，你可以添加任意多个颜色节点，默认情况颜色节点会平铺，但是我们可以指定位置 */
background-image: linear-gradient(90deg, red 20%, blue 40%, yellow 100);
/* 值 0deg 是指竖直向上, 伴随着数值增大，角度从竖直向上开始沿顺时针变化 */
/* 渐变应用: 条纹，重复渐变 */
/* 条纹: 如图1-1所示 */
background-image: linear-gradient(90deg, red 20%, black 20%, black 60%, blue 60%, blue 100%)
/* 重复渐变: 如图1-2所示 该效果用在进度条上可谓妙哉 */
background-image: repeating-linear-gradient(-45deg,
#57b, #57b 10px, #148 10px, #148 20px);
/* 除了线性渐变外，还有径向渐变，字面意思理解，一个是线性，一个是径向，其他无太多差别
radial-gradient(); repeating-radial-gradient(); */
图1-1
图1-2
阴影
box-shadow
/* box-shadow 接受三个必填的值: 水平偏移量，竖直偏移量，阴影颜色 */
box-shadow: 1em 1em black;
/* box-shadow 还可接受两个选填值: 模糊半径 扩展半径
模糊半径: 阴影边缘模糊区域的大小，可以为阴影生成一个更柔和且有点透明的边缘
扩展半径: 控制阴影大小，设置正值则阴影全方位变大，设置负值则阴影全方位变小
一说到这里就会晕，什么模糊半径，扩展半径，讲人话好吗？
人话说不出来，直接上图！
*/
/* CSS可以直接看到。恕我直言：还是多用模糊半径吧，扩展半径是个*** */
text-shadow
如同 radical-gradient 和 linear-gradient 一样，text-shadow 和 box-shadow 一个尿性(text-shadow少一个扩展半径)！
混合模式
变暗
multiply: 前景色越亮，背景色显示出来的越多。
darken: 选择两个颜色中较暗的那个
color-burn: 加深背景色，增加对比度
变亮
screen: 前景色越暗，背景色显示出来的越多。
lighten: 选择两个颜色中较亮的那个
color-dodge: 加亮背景色，降低对比度
对比
overlay: 对暗色使用multiply, 对亮色使用screen, 以增加对比度，对比效果较柔和
hard-light: 大幅增加对比度，有点像叠加，但是使用加强版的multiply或者screen, 对比效果明显
soft-light: 有点类似于hard-light，但是使用burn/dodge来替代multiply/screen。
复合
Hue: 将上层颜色的色相混合到下层颜色上。
saturation: 将上层颜色的饱和度混合到下层颜色上。
luminosity: 将上层颜色的明度混合到下层颜色上。
color: 将上层颜色的色相饱和度混合到下层颜色上。
比较
difference: 从亮色中减去暗色。
exclusion: 类似于difference, 但对比度稍弱。
