隨機背景

原文出處：http://www.w3cplus.com/css3/css-secrets/random-backgrounds.html

問題

雖然平鋪幾何圖形很棒，但看起來還是有點乏味。而在自然界中，萬事萬物皆有不同。即使是在相似中，也充滿了變化和隨機因素。你可以看一看花圃：雖然花朵具有一致的艷麗，但也各有各的亮點。這個世界上沒有任何兩朵花是相同的。這就是為什么我們要嘗試讓背景圖案接近真實，而且我們也在嘗試讓平鋪的元素之間盡量減少縫隙，讓它們顯得渾然天成自成一體，但是這也會讓樣式文件的大小超出我們的預期。

當你發(fā)現(xiàn)了某些獨特的特性——比如木頭紋理上特定距離就會出現(xiàn)的結，就會打破隨機性這種感覺 — Alex Walker,?The Cicada Principle and Why It Matters to Web Designers

模擬隨機是一件非常具有挑戰(zhàn)性的事情，因為 CSS 并沒有任何創(chuàng)造隨機性的能力。讓我們重新拿起條紋這個示例，假設我們想要得到擁有各種顏色和寬度的垂直條紋（讓我們簡化為四種顏色吧），并且還要讓它們之間過渡自然。我們的第一個想法可能就是創(chuàng)建一個漸變：

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

就像下圖看到的那樣

圖注：實現(xiàn)偽隨機條紋的初次嘗試，其中所有的顏色都是由相同的線性漸變生成的

非常明顯就分辨出了重復元素，這主要是因為它只重復了?80px（background-size）。我們可以做得更好嗎？

解決方案

對于這一問題，我的第一個想法就是將整個的條紋分成不同塊，然后增加這些塊的隨機性：一個基色和三個條紋層，在不同的距離上實現(xiàn)平鋪。通過硬編碼顏色過渡點的位置，我們可以改變條紋的寬度，通過使用?backgroud-size，我們可以控制間距，最終就能實現(xiàn)上面的初步設想了：

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%;

因為最頂層的平鋪將會最容易被注意到（因為它覆蓋了所有的圖層），所以我們對最上面的一層施加最大的間歇性間距（在本例中，就是桔黃色條紋）。

圖注：第二次嘗試，通過不同的?background-size?讓不同的圖層發(fā)生重疊；虛線框內(nèi)的圖案是用來平鋪的圖案

正如上圖中所看到的那樣，整體看起來隨機多了，但如果我們仔細觀察，還是能意識到每?240px?就會有一次重復。也就是說，在此類組合中，所有重復塊的偏移量就是第一個非重復條紋終點位置的一倍或數(shù)倍。也許你還記得在學校里我們學過的最小公倍數(shù)（LCM，Least Common Multiple），它是一個整數(shù)集合中所有整數(shù)的一倍或多倍。因此，這里條紋塊的大小就是背景大小的最小公倍數(shù)，即?40/60/80，它們的最小公倍數(shù)就是?240。

上面的示例就遵循了這一不易察覺的隨機性，所以我們需要增大平鋪條紋塊的大小。感謝數(shù)學的存在，無需漫長和痛苦的計算我們就可以實現(xiàn)它，因為我們已經(jīng)知道了答案。為了達到最大的最小公倍數(shù)，那么這些數(shù)之間必須互質。在本例中，最小公倍數(shù)就是由它們得出來的。比如，3/4/5?就互為質數(shù)，所以它們的最小公倍數(shù)就是?3 × 4 × 5 = 60。讓數(shù)值互為質數(shù)的最簡單方式就是讓它們是質數(shù)，在數(shù)學上質數(shù)和其他任何數(shù)都互為質數(shù)。質數(shù)的列表在網(wǎng)絡上隨處可見。

為了保持最大的隨機性，我們甚至使用質數(shù)來設計條紋的寬度。這就是我們的代碼：

background: hsl(20, 40%, 90%);
background-image:
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

是的，代碼很難看，但是效果如下圖所示：

圖注：最終的條紋，使用質數(shù)來增加隨機性

現(xiàn)在我們的條紋至少?41 × 61 × 83 = 207583px?才會平鋪一次，完全超出了一個屏幕分辨率所能容納的數(shù)量。

上面的技巧（使用質數(shù)增加背景平鋪時的隨機性）被稱為 “The Cicada Principle”，由 Alex Walker 第一次提出。值得注意的是，這不僅僅對背景有用，而且對需要平鋪的任何事情都有用。其他的應用包括但不限于：

• 為一個圖庫中圖片的旋轉角度增加一點點隨機性，可以使用?:nth-child(an)?選擇器，其中?a?為質數(shù)。
• 為動畫的運動過程添加一些隨機性，那么可以添加多個以質數(shù)為時間長度的持續(xù)時間（點擊這里查看示例）

向提出這一技巧的 Alex Walker 致敬，?The Cicada Principle and Why It Matters to Web Designers。?Eric Meyer?隨后提出了?Cicadients?這一概念, 其中就包含了將該技巧通過 CSS 漸變添加到背景圖片上。Dudley Storey 也就該概念發(fā)表了大量非常有價值的文章.

總結

前面介紹的內(nèi)容，不管是使用漸變實現(xiàn)的線性漸變還是徑向漸變，或者說是復雜的紋理背景，都是具有一定的規(guī)律性。在這一節(jié)中主要向大家闡述了如何實現(xiàn)隨機性的背景圖效果。