SASS を使用してフッターの動的な背景画像を作成するにはどうすればよいですか?

SASS を使用した動的背景画像

複数のウィジェットを使用して Web サイトのフッターをスタイル設定する場合、独自の背景画像で視覚的な面白みを追加すると、美しさが向上します。 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 中国語 Web サイトの他の関連記事を参照してください。