Page 74 - css揭秘
P. 74
7 伪随机背景
背景知识
CSS 渐变，“条纹背景”，“复杂的背景图案”
难题
重复平铺的几何图案很美观，但看起来可能有一些呆板。其实自然界
中的事物都不是以无限平铺的方式存在的。即使重复，也往往伴随着多样
性和随机性。比如花园里的花朵：它们因为排列整齐而生出美感，也会因
为稍稍错落而透出情趣。没有两朵花是完全一样的。这就是为什么当我们
试图让背景图案尽可能显得自然的时候，往往会想办法让人完全忽略或难
以察觉平铺贴片之间的“接缝”，而这一点又与我们保持较小文件体积的期
望直接冲突。
图 2-52
大自然不会以“无缝”贴片的方
“当你注意到一个有辨识度的特征（比如，木纹上的节疤）在以固定
式重复自己
的规律循环重复时，那它试图营造的自然随机性就会立刻崩塌。”
——Alex Walker，《蝉原则对网页设计的重要性》（http://sitepoint.com/
the-cicada-principle-and-why-it-matters-to-web-designers）
重现大自然的随机性是一个挑战，因为 CSS 本身没有提供任何随机功
能。让我们以条纹作为例子吧。假设我们想得到不同颜色和不同宽度的垂直
条纹（方便起见，我们只讨论四种颜色），并且不能让人看出贴片平铺时的
“接缝”。我们的第一个想法可能就是创建一个具有四种颜色的条纹图案：
background: linear-gradient(90deg,
#fb3 15%, #655 0, #655 40%,
#ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;
在图 2-53 中可以看到，这个重复规律是非常明显的，因为渐变图案每
隔 80px（即 background-size 的值）就会复重一次。有更好的办法吗？
7 伪随机背景 43
ࠡ JOEC
