ホームページ >ウェブフロントエンド >CSSチュートリアル >SASS を使用してフッターの動的な背景画像を作成するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-18 21:50:02982ブラウズ

How can I create dynamic background images for a footer using 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。