SASS は背景画像をランダムに選択するのにどのように役立ちますか?

SASS でのランダムな背景画像の選択

驚きの要素で Web ページを華やかにしたいですか? SASS を使用すると、事前定義されたリストから背景画像をランダムに選択して、Web サイトにダイナミズムを加えることができます。

SASS を使用したランダムな背景画像の生成

Sass のサービス指定された範囲内で乱数を選択するために利用できる便利なランダム関数。この関数と画像 URL のリストを組み合わせることで、SASS がコンパイルされるたびに異なる背景画像を持つ CSS を作成できます。

コード例:

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

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

この例では、$imgKey は 1 から 5 までの乱数を取得します。次に、$nth 関数は、その乱数に対応する画像 URL を $list 変数から選択します。結果は、指定されたコンテナ行にランダムな背景画像を割り当てる CSS ルールです。

コンパイルと画像の選択

ランダムな背景画像は、ページにアクセスするたびではなく、SASS が再コンパイルされたときにのみ変更されます。これにより、ランダムな選択が複数のページ読み込みにわたって一貫して反映され、突然の視覚的な変化が防止されます。

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