CSSでイラストを追加する擬似ランダム

エリックマイヤーのブログ投稿の間で5つの異なるイラストが巧妙に使用されています。

Ericは、各図を個別の背景画像として設定し、 nth-of-type CSS属性を使用して画像を切り替えます。

 .Entry：nth-​​of-type（2n 1）:: {
   背景画像：url（image-1.png）;
}

.Entry：nth-​​of-type（3n 1）:: {
   背景画像：url（image-2.png）;
}

.Entry：nth-​​of-type（4n 1）:: {
   背景イメージ：url（image-3.png）;
}

.Entry：nth-​​of-type（5n 1）:: {
   背景画像：url（image-4.png）;
}

ここでは(2n 1)などの表現を理解するのに役立つ:nthテストツールをお勧めします。任意の文字列を入力して、それがWebサイトにどのように影響するかを確認できます。

エリックのブログ投稿に戻って、彼が述べたように、彼のテクニックは擬似ランダムであり、ページ上の写真はランダムに思えますが、実際にはそうではありません。とにかく、これは非常に賢いテクニックです！長い間ウェブサイトを閲覧するときに発生する視覚的単調性を効果的に破ります。

実際の効果は次のとおりです。

効果は素晴らしいです！

別の方法は、CSSで乱数を使用することです。たとえば、JavaScriptに変数を設定し、CSSカスタムプロパティを使用して適用できます。または、すべての写真を単一のSprite画像ファイルに入れて、乱数に基づいてbackground-positionを変更することができます。

CSSでは、これは間違いなく間違った答えのケースであり、同じ優れた効果を達成するための別の方法です！

以上がCSSでイラストを追加する擬似ランダムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。