Pseudo-rawak menambah ilustrasi dengan CSS

Lima ilustrasi yang berbeza digunakan dengan bijak antara catatan blog Eric Meyer, yang kelihatannya kelihatan secara rawak.

Eric menetapkan setiap ilustrasi sebagai imej latar belakang yang berasingan dan menukar imej menggunakan atribut CSS nth-of-type , sebagai contoh:

 .Entry: nth-of-type (2n 1) :: sebelum {
   imej latar belakang: URL (image-1.png);
}

.Entry: nth-of-type (3n 1) :: sebelum {
   imej latar belakang: URL (image-2.png);
}

.Entry: nth-of-type (4n 1) :: sebelum {
   imej latar belakang: url (image-3.png);
}

.Entry: nth-of-type (5n 1) :: sebelum {
   imej latar belakang: URL (image-4.png);
}

Di sini kami mengesyorkan kami sendiri :nth , yang dapat membantu memahami ungkapan seperti (2n 1) . Anda boleh memasukkan sebarang rentetan dan melihat bagaimana ia mempengaruhi laman web.

Kembali ke catatan blog Eric, seperti yang disebutkan, tekniknya adalah pseudo-rawak , dan sementara gambar-gambar di halaman kelihatan rawak, ia sebenarnya tidak berlaku. Bagaimanapun, ini adalah teknik yang sangat pandai! Ia secara berkesan memecahkan monotonis visual yang berlaku apabila melayari laman web untuk masa yang lama.

Kesan sebenar adalah seperti berikut:

Kesannya hebat!

Cara lain ialah menggunakan nombor rawak dalam CSS. Sebagai contoh, kita boleh menetapkan pembolehubah dalam JavaScript dan memohon menggunakan sifat tersuai CSS. Sebagai alternatif, kita boleh meletakkan semua gambar dalam fail imej sprite tunggal dan menukar background-position berdasarkan nombor rawak.

Di CSS, ini pastinya satu kes tanpa jawapan yang salah, hanya cara yang berbeza untuk mencapai kesan yang sangat baik!

Atas ialah kandungan terperinci Pseudo-rawak menambah ilustrasi dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!