如何使用 SASS 為頁尾建立動態背景影像？

使用 SASS 的動態背景圖像

使用多個小部件設計網站頁腳時，透過獨特的背景圖像添加視覺興趣可以增強美感。使用 SASS，您可以從定義的清單中隨機選擇背景圖像。

使用 SASS 隨機函數的解

SASS v3.3.0 引入了 random() 函數。透過將其與圖像 URL 清單和變數插值結合，可以產生在編譯期間動態選擇隨機背景圖像的 CSS。

$imgKey: random(5);

$list: "url('http://domain.com/blablabla/apple.png'),
        url('http://domain.com/blablabla/banana.png'),
        url('http://domain.com/blablabla/cherry.png'),
        url('http://domain.com/blablabla/durian.png'),
        url('http://domain.com/blablabla/eggplant.png')";

$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: $nth;
    background-position: right bottom;
    background-repeat: no-repeat;
}

即時範例

請參閱即時範例網址：http://sassmeister.com/gist/8966210。

重要注意

請記住，與任何 SASS 編譯一樣，隨機圖像選擇僅在 SASS 編譯期間發生，而不一定在每次頁面訪問期間發生。

以上是如何使用 SASS 為頁尾建立動態背景影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！