首頁 > web前端 > css教學 > 如何使用 SASS 為頁尾建立動態背景影像?

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

DDD
發布: 2024-11-18 21:50:02
原創
974 人瀏覽過

How can I create dynamic background images for a footer using 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板