偽隨機添加CSS的插圖

Eric Meyer博客文章之間巧妙地使用了五種不同的插圖，它們看似隨機出現。

Eric 將每張插圖設置為單獨的背景圖片，並使用nth-of-type CSS 屬性切換圖片，例如：

 .entry:nth-of-type(2n 1)::before {
   background-image: url(image-1.png);
}

.entry:nth-of-type(3n 1)::before {
   background-image: url(image-2.png);
}

.entry:nth-of-type(4n 1)::before {
   background-image: url(image-3.png);
}

.entry:nth-of-type(5n 1)::before {
   background-image: url(image-4.png);
}

這裡推薦我們自己的:nth測試工具，它能幫助理解(2n 1)之類的表達式。您可以輸入任何字符串，並查看其對網站的影響。

回到Eric的博客文章，正如他提到的，他的技術是偽隨機的，雖然頁面上的圖片看起來是隨機的，但實際上並非如此。無論如何，這是一種非常巧妙的技術！它有效地打破了長時間瀏覽網站時出現的視覺單調性。

實際效果如下所示：

效果很棒！

另一種方法是使用CSS 中的隨機數。例如，我們可以在JavaScript 中設置一個變量，然後使用CSS 自定義屬性應用它。或者，我們可以將所有圖片放在單個雪碧圖文件中，並根據隨機數更改background-position 。

在CSS 中，這絕對屬於沒有錯誤答案的情況，只是實現同一出色效果的不同方法！

以上是偽隨機添加CSS的插圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！