CSS奇思妙想 -- 使用 background 创造各种美妙的背景

本文属于 CSS 绘图技巧其中一篇，系列文章：

• 在 CSS 中使用三角函数绘制曲线图形及展示动画
• CSS奇思妙想 -- 使用 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
• 不可思议的混合模式 background-blend-mode

然后，我们来尝试第一个图案，先简单体会一下 mix-blend-mode 的作用。

我们使用 repeating-linear-gradient 重复线性渐变，制作两个角度相反的背景条纹图。正常而言，不使用混合模式，将两个图案叠加在一起，看看会发生什么。

额，会发生什么就有鬼了

标签：--,渐变,mask,gradient,奇思妙想,mode,background,CSS
来源： https://www.cnblogs.com/coco1s/p/14376348.html