SASS を使用して URL のリストから背景画像をランダムに選択するにはどうすればよいですか?

Sass: 指定されたリストからのランダムな背景画像の利用

強力な CSS 拡張機能である SASS は、Web ページのスタイルを設定するための高度な機能を提供します。そのような機能の 1 つは、所定のリストから背景画像を動的に選択する機能です。この記事では、SASS を使用してこれを実現する方法について説明します。

質問:

SASS を使用して、提供されたリストから背景画像をランダムに選択する CSS コードを生成するにはどうすればよいですか? URL?

答え:

このタスクを達成するには、バージョン 3.3.0 で導入された SASS のrandom() 関数の力を利用します。この関数は、指定された範囲内の乱数を生成します。この機能を画像 URL の事前定義リストと組み合わせることで、動的な背景画像の割り当てを作成できます。

次の SASS コード スニペットを考えてみましょう。

$imgKey: random(5);

$list: "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg";
$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: url("http://domain.com/blablabla/#{$nth}");
    background-position: right bottom;
    background-repeat: no-repeat;
}

この例では、$ list 変数は画像 URL のリストを保持します。 $imgKey 変数は、リストから選択される画像のインデックスを表す 1 ～ 5 の乱数を生成します。 nth($list, $imgKey) 関数は、そのインデックスの画像 URL を抽出します。

補足:

• ランダムに選択された背景画像のみが変更されます。 SASS がコンパイルされるとき。これは、ページにアクセスするたびに起こるわけではありません。
• リスト内の画像の数に一致するように、random() 関数の範囲を調整できます。
• 詳細については、SASS ドキュメントを参照してください。 random() 関数と nth() 関数に関する情報。

以上がSASS を使用して URL のリストから背景画像をランダムに選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。