本文属于 CSS 绘图技巧其中一篇，系列文章：
将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。
通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的理解各种不同的渐变。
同时，借助强大的 CSS-Doodle，你将学会如何运用一套规则，快速创建大量不同的随机图案，感受 CSS 的强大，走进 CSS 的美。
背景基础知识
我们都知道，CSS 中的 background 是非常强大的。
首先，复习一下基础，在日常中，我们使用最多的应该就是下面 4 种：
- 纯色背景
background: #000：
- 线性渐变
background: linear-gradient(#fff, #000):
- 径向渐变
background: radial-gradient(#fff, #000):
- 角向渐变
background: conic-gradient(#fff, #000):
背景进阶
当然。掌握了基本的渐变之后，我们开始向更复杂的背景图案进发。我最早是在《CSS Secret》一书中接触学习到使用渐变去实现各种背景图案的。然后就是不断的摸索尝试，总结出了一些经验。
在尝试使用渐变去制作更复杂的背景之前，列出一些比较重要的技巧点：
- 渐变不仅仅只能是单个的
linear-gradient或者单个的radial-gradient，对于background而言，它是支持多重渐变的叠加的，一点非常重要； - 灵活使用
repeating-linear-gradeint（repeating-radial-gradeint），它能减少很多代码量 -
transparent透明无处不在 - 尝试
mix-blend-mode与mask，创建复杂图案的灵魂 - 使用随机变量，它能让一个 idea 变成无数美丽的图案
接下来，开始组合之旅。
使用 mix-blend-mode
mix-blend-mode ，混合模式。最常见于 photoshop 中，是 PS 中十分强大的功能之一。在 CSS 中，我们可以利用混合模式将多个图层混合得到一个新的效果。
关于混合模式的一些基础用法，你可以参考我的这几篇文章：
然后，我们来尝试第一个图案，先简单体会一下 mix-blend-mode 的作用。
我们使用 repeating-linear-gradient 重复线性渐变，制作两个角度相反的背景条纹图。正常而言，不使用混合模式，将两个图案叠加在一起，看看会发生什么。
额，会发生什么就有鬼了