背景
最近在学习CSS新世界这本书（张鑫旭学长的书，看了绝对不会后悔），看到了background属性多背景特性的解释，在解释反例的时候提到了这个网站：
里面是一些独特的CSS纹理背景的演示展示：
网站上的演示非常有趣。 我自己写了代码，实现了几个demo案例，挺有趣的。 所以我将我的学习思路整理出来分享给大家，并提供一些解决问题的思路。
初步知识
如果你对CSS渐变已经有了一定的了解，可以直接跳到下一节看案例分析。
用CSS3制作纹理背景主要涉及到CSS3的几个特性：
背景图像的多种背景特征
background-image 属性可以为一个元素设置一张或多张背景图像。 绘图时，图像沿 z 轴方向堆叠。 首先指定的图像将绘制在后面指定的图像内，因此指定的第一个图像最接近用户。
MDN上的示例如下：
.example1 {
width: 400px;
height: 200px;
background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png"),
url("https://interactive-examples.mdn.mozilla.net/media/examples/star.png");
}
影响：
此外，背景颜色将绘制在图像下方，元素的边框将绘制在图像上方。 整体顺序如下：
CSS之所以可以用来生成丰富的纹理背景，是由于background-image的多背景特性。 可以说css3渐变生成，如果没有这个功能，就很难达到预期的效果。
使用渐变勾勒图像轮廓
CSS3支持渐变函数，你可以使用它们来绘制各种图像。 常用的梯度函数有：
下面简单介绍一下这个梯度函数。
线性梯度（）和重复线性梯度（）
即线性渐变和重复线性渐变。 Linear-gradient() 可用于创建表示两种或多种颜色之间的线性渐变的图像。
线性渐变的构成原理这里不再解释。 请参考MDN线性渐变合成部分。
我们在这里使用的主要功能是：
如果两个或多个颜色停在同一位置，则在该位置声明的第一个和最后一个颜色之间的过渡将是一条粗俗的线。
使用此功能，您可以生成颜色边界清晰的色块。
普通渐变会自然地在颜色之间过渡：
background: linear-gradient(45deg, deepskyblue, 50%, pink);
利用以上功能：
background: linear-gradient(45deg, deepskyblue 50%, pink 50%);
会产生具有锐利边缘的色块，而不是过渡效果：
灵活运用这一点，可以绘制出各种边界清晰的直线图形。
Repeating-Linear-Gradient() 与 Linear-Gradient() 函数类似，用于创建由重复线性梯度组成的图。 当渐变图案无法覆盖整个容器时，该函数将重复该图案以覆盖整个容器，例如：
background: repeating-linear-gradient(45deg, deepskyblue 0, deepskyblue 50px, pink 50px, pink 100px);
如果是普通的线性渐变，100px之后图片全部显示为粉红色； 在重复的线性渐变中，此图案将填充容器：
径向梯度（）和重复径向梯度（）
即径向渐变和重复径向渐变。 与上面的线性渐变不同，径向渐变由从原点发出的两种或多种颜色之间的逐渐过渡组成。 它的形状可以是方形或椭圆形。
普通渐变：
background: radial-gradient(deepskyblue, pink);
影响：
同样，径向渐变可以产生明确定义的而不是过渡的颜色块：
background: radial-gradient(deepskyblue 50%, pink 50%);
灵活运用，可以画出各种边界清晰的椭圆、圆、环。
同样，径向渐变也有重复的功能。 Repeating-radial-gradient() 可以创建重复的径向渐变图案来填充容器，例如：
background: repeating-radial-gradient(deepskyblue 0, deepskyblue 40px, pink 40px, pink 80px);
效果如下：
圆锥曲线梯度和重复圆锥曲线梯度
最终的渐变称为锥形渐变。 之所以叫圆锥体渐变，是因为生成的图案与圆锥体的俯视图非常相似（开始回忆一些中学立体几何知识……）。 一个典型的应用是生成色轮。
简单渐变：
background: conic-gradient(deepskyblue, pink, green);
影响：
同样，锥形渐变的边界也可以生成具有清晰颜色边界的色块：
background: conic-gradient(deepskyblue 33%,pink 33% 66%, green 66% 100%);
使用锥形渐变，可以生成具有固定辐射角的色块。
圆锥渐变的重复函数，repeating-conic-gradient() 可以创建一个重复的圆锥渐变图案来填充容器，例如：
background: repeating-conic-gradient(deepskyblue 0 30deg, pink 30deg 60deg);
影响：
就算我们的规划工作到这里就结束了，需要理解的后期知识也已经规划好了，接下来就是开始画纹理了。
第 1 步：观察纹理并找到重复单元
用CSS制作纹理，第一步是观察纹理。
在这一步中，我们想要找到纹理中最小的可重复元素。 这一步非常重要，如果没有找到合适的纹理，就很难达到预期的效果。
我总结了观察时需要注意的几点：
接下来我们就结合具体案例来分析一下。 以下面的 Zig-Zag 为例：
所以首先我们分析纹理中出现的腰线。 显然，纹理中出现的腰线都是直线。 预备章节中，哪些梯度函数可以生成直线？ 显然这是一个线性渐变。
接下来我们必须找到最小的可重复元素。 这个纹理比较简单，很直观的看到最小的单位是：
整个纹理可以从这个最小的单元开始重复。
这里可能有人会问为什么最小单位不是这个：
尽管如此，不要忘记最重要的一点：可重复单位必须是梯形。 这些不规则形状无法在CSS中绘制（即使是透明背景的矩形也必须占据正方形空间）。
让我们进入正题吧。 群里有朋友问如何去掉png图片的背景，让图片的边框就是颜色的边框。 这是很难实现的。 无论是图片还是CSS元素，都必须是圆形的。 记住不要把颜色边界当作图片边界，因为背景是透明的。
在这一步中，我们考虑将纹理制作为地砖。 地砖是最小的可重复单元。 我们的目标是确定瓷砖的风格。
这一步完成之后，基本上我们的工作就完成了70%。
步骤 2：结合背景图像和背景定位勾勒出最小单元
在上一步中，我们确定了基本单元的样式。 在这一步中，我们需要使用background属性来实现这种样式。
记住我们在观察纹理时注意到的第一点：
观察纹理中是否出现腰线，是直线还是曲线。
如果纹理腰线是直线，则基本使用线性渐变函数 Linear-gradient()； 如果是曲线，那么最有可能使用径向梯度函数gradient-gradient()。 锥度梯度和梯度重复函数是根据具体情况而定，使用的概率比较小。
在上面的例子中，很明显，线条是直线，所以这里可以使用 Linear-gradient() 。
确定了用于绘制草图的梯度函数后，继续观察我们的重复单元，我们可以发现仅通过绘制背景图像很难生成这种图案。
显然，多个不同的背景元素需要移位和重叠才能合成。 这里我们利用了background属性的多背景特性，然后利用background-position属性来定位各个背景图案，从而达到效果。
现在我们开始勾画纹理。
首先可以确定的是背景元素的规格。 这里只需要将background-size的宽度和高度设置为相同即可：
background-size: 30px 30px;
接下来，您可以开始单独勾画背景中的每个图案。
为了勾勒出基本单位，我们继续将基本单位分解为越来越简单的形状。 以下是一些想法：
在之字形示例中，所有腰线都是直线，因此用于组合元素的基本形状是三角形。 将图中的三角形进行分割后，我们可以得到四个三角形：
（看图我就颤抖了，看一下）
不要把里面的3+4直角三角形当成一个整体的基本图形。 CSS背景很难旋转。
可见下面的1和2非常好写。 显然是从白色到紫色背景色的45度线性渐变，以及-45度的线性渐变。 ，背景定位不需要修改，在原点即可。
浅色部分直接作为背景色，所以我们可以编写包含1和2以及背景色的代码：
background: linear-gradient(45deg, #EC173A 25%, transparent 25%) 0 0,
linear-gradient(135deg, transparent 75%, #EC173A 75%) 0 0,
#ECEDDC;
background-size: 30px 30px;
渐变的起始颜色和结束颜色以及角度和位置的写法不只有一种。 以2号为例，可以写成-45度，从25%位置的红色位置到背景颜色的渐变，也可以写成从135度的背景颜色到75%位置的渐变至黑色。 按照个人习惯写就好了。
但3号和4号实际上并不位于原点。 我们完成了3号所在的背景元素，发现它应该是一个移位的背景：
灰色菱形部分就是3号三角形的背景元素位置，即-15px 0。同理，我们可以得到4号三角形两边的位置都是15px 0。
结合前面的四个背景元素，可以得到CSS代码：
我们用一个动画来解释整个过程：
所以我们制作了这个纹理。
留下一个简单的课后题，你还有其他写法吗？ 比如用黑色作为背景色，分割白色部分？
先进案例
上面分析的例子腰线比较简单，拆卸也比较容易。 无需考虑多个背景之间的层级关系，只需要简单的组装即可。
接下来我们将分析一些更复杂的纹理。
箭头纹理
乍一看，这个纹理是一个倾斜45度的箭头图案，并且有两种不同的颜色，所以我们的基本重复单元应该是以下两种解决方案：
这里我以双方的方案2为基础。
观察图形后，首先根据前面的三角形原理，可以分割出两种形态：
先写下这部分的代码，基本单位是按照128px * 128px：
background: linear-gradient(45deg, #92baac 25%, transparent 25%),
linear-gradient(45deg, #92baac 25%, transparent 25%) 64px -64px,
background-color: #e1ebbd;
background-size: 128px 128px;
接下来考虑如何组合剩余的模式。 箭头的主体部分是一个倾斜45度的正方形，这对于我们直接用渐变来实现显然是困难的。
这时我们可以考虑对多个背景进行分层覆盖来达到最终的效果，比如将以下部分作为一个整体放置在多个背景的底部：
background: linear-gradient(45deg, #92baac 25%, transparent 25%),
linear-gradient(45deg, #92baac 25%, transparent 25%) 64px -64px,
linear-gradient(45deg, transparent 50%, #e1ebbd 50%, #e1ebbd 75%, transparent 75%),
background-color: #e1ebbd;
background-size: 128px 128px;
效果是：
最后css3渐变生成，我们剩下箭头的主体和两个角的小三角形：
如果你想单独制作几个这样的元素，你需要写很多渐变来合成。 我们不妨换个思路，制作越来越完整的背景进行叠加：
这里我们创建一个从屏幕右下角到左上角的-45°渐变，并将该图形放置在背景的底部。 在比较重要的颜色断点位置中，通过比例来更好地展示治疗效果：
记住当前视口应该放在底部，这样我们的纹理效果就会减弱。
用动画演示（为了方便显示，降低了背景颜色的透明度）：
模拟随机星空背景纹理
这个纹理也是比较典型的纹理。 可以点击查看整体效果：
显然，这个背景中出现的星光是使用径向渐变生成的，但是生成随机效果呢？
这也很简单。 它仍然利用了background属性的多背景特性。 通过声明多个不同位置和背景大小的背景并将其叠加，可以形成随机效果。
我们先尝试写一个星光：
background: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px);
background-size: 350px 350px;
background-position: 0 0;
background-color: black;
这会生成单个星光：
然后我们叠加两个不同的星光并调整位置和大小值：
这样我们就基本完成了一个星空背景。 如果你想要更自然的背景，可以调整更多参数或减少一些背景。
总结
通过几个典型案例的分析，基本上大部分纹理都可以用常用的处理方法来分析和实现。
本文示例的纹理相对简单、清晰。 如果你已经掌握了方法，不妨去网站继续挑战其他更难的纹理实现。
发表评论