Page 75 - css揭秘

图 2-53
我们对于伪随机条纹的首次尝
试，是用单条线性渐变来生成所
有颜色

解决方案

为了更真实地模拟条纹的随机性，我们接下来可能会想到，把这组条纹
从一个平面拆散为多个图层：一种颜色作为底色，另三种颜色作为条纹，然
后再让条纹以不同的间隔进行重复平铺。这一点不难做到，我们在色标中定
好条纹的宽度，再用 background-size 来控制条纹的间距。代码看起来可
能是这样的：

background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 10px, transparent 0),
linear-gradient(90deg, #ab4 20px, transparent 0),
linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

图 2-54
我们的第二次尝试，是把不同尺
寸的渐变图案叠加起来；平铺规
律仍然是有迹可寻的，单个贴片
用虚线框标示

①
因为最顶层贴片 的重复规律最容易被察觉（它没有被任何东西遮挡），
1
我们应该把平铺间距最大的贴片安排在最顶层（在我们的例子中是橙色条
纹）。
在图 2-54 中可以看到，这样的结果显明更有随机的感觉；但如果仔细
观察的话，仍然可以看出图案每隔 240px 就会重复一次。这个组合图案中第
一个贴片的终点，就是各层背景图像以不同间距重复数次后再次统一对齐的
点。让我们再次穿越回初中数学课堂：如果我们有一些数字，那么可以同时
整除所有数字的最小数字就叫作它们的最小公倍数（LCM）。因此，这里贴
片的尺寸实际上就是所有 background-size 的最小公倍数，而 40、60 和 80
的最小公倍数正是 240。

① 请注意，“贴片”这个词在这里是比较广义的。它不仅指各个渐变图案中的重复单元，还泛
指多层渐变合成的最终图案中可感知的重复单元。（换句话说，如果我们用的不是多重背景
而是传统的背景图片，那么这个平铺的图片有多大才能达到相同的效果呢？）

44 第 2 章 背景与边框

඀ࠡ JOEC