SASS で背景画像をランダムに選択するにはどうすればよいですか?

ランダム選択を使用した SASS の動的背景画像

Web サイトの視覚的な魅力を高めるために、背景画像を組み込むのが一般的です。ただし、デザインに変化を加えたい場合は、SASS を使用してリストから画像をランダムに選択することが強力なテクニックとなります。

目的:

生成事前に設定されたリストから背景画像をランダムに選択し、CSS に挿入する SASS コードselector.

解決策:

SASS の最新バージョンでは、random() 関数により乱数を生成する機能が提供されます。これを変数に保存された画像 URL のリストと組み合わせることで、CSS ルールの背景画像を動的に選択できます。

次の例を考えてみましょう:

$image-list: (
  "url(domain.com/blablabla/image1.png)",
  "url(domain.com/blablabla/image2.png)",
  "url(domain.com/blablabla/image3.png)",
  "url(domain.com/blablabla/image4.png)",
  "url(domain.com/blablabla/image5.png)"
);

$random-image: random(length($image-list));

#footer-widgets .container .row {
  background-image: nth($image-list, $random-image);
}

この例では、画像 URL のリストは $image-list 変数に保存されます。 random() 関数は、1 から 5 (リストの長さ) までのランダムな整数を生成するために使用されます。 nth() 関数は、指定されたランダム インデックスで画像 URL を取得するために使用されます。

コンパイルされた CSS には、指定された CSS セレクターの背景画像プロパティにランダムに選択された背景画像 URL が含まれます。このコードは、SASS がコンパイルされるたびに異なる背景画像が使用されるようにします。

考慮事項:

ランダム値は Sass 中にのみ生成されることに注意することが重要です。編集。これは、ページの訪問に関係なく、SASS が再度コンパイルされるまで背景画像は同じままであることを意味します。

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