如何使用SASS在CSS中隨機選擇背景圖片？

使用SASS 隨機化背景影像

如果您需要使用從清單中隨機選擇的背景影像輸出CSS，SASS 提供了有效的SASS解決方案。透過 Sass v3.3.0 引入隨機函數，您可以輕鬆實現這種隨機選擇。

實作

要實現隨機背景圖片選擇，您將需要定義一個影像清單（$list）和一個隨機變數（$imgKey）函數：

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;

在CSS 中，使用nth() 函數根據隨機鍵選擇適當的圖像：

#footer-widgets .container .row {
    background-image: url("/images/#{$nth($list, $imgKey)}.jpg");
    ...
}

實時示例

訪問http:/ /sassmeister.com/gist/8966210 上的即時範例以查看此技術

注意：請記住，隨機值僅在Sass 編譯時才會改變，這可能不會在每次造訪頁面時都會發生。

以上是如何使用SASS在CSS中隨機選擇背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！