Gunakan css2.1 untuk mendapatkan banyak latar belakang dan banyak efek batas
Gunakan CSS2.1 untuk mendapatkan efek 3 gambar latar belakang dan 2 gambar konten pada satu elemen HTML, atau efek beberapa batas. Metode peningkatan progresif ini berlaku untuk semua browser yang mendukung elemen semu CSS2.1 dan atribut pemosisiannya. Tidak diperlukan dukungan CSS3.
Demo: Berbagai latar belakang menggunakan CSS2.1
Demo: Polyborder menggunakan CSS2.1
Browser yang didukung: Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+
Bagaimana hal ini dicapai?
Pada dasarnya, objek semu yang kita buat (:sebelum dan :setelah) sama dengan cara kita memperlakukan elemen HTML bersarang. Namun mereka memiliki keunggulan unik dibandingkan elemen HTML bersarang - mereka tidak bersifat semantik.
Saat menggunakan banyak latar belakang atau banyak batas, kita perlu memperbaiki konten lapisan elemen semu di belakang konten elemen HTML menggunakan pemosisian absolut.
Konten yang tidak nyata terkandung dalam elemen semu untuk positioning. Ini berarti mereka dapat meregang secara bebas dalam batasan elemen "induk" tanpa mempengaruhi kontennya. Ini dapat secara sewenang-wenang menggabungkan nilai posisi absolut atas, kanan, bawah, kiri, lebar dan tinggi. Kunci utamanya adalah kinerja kombinasinya fleksibel.
Efek apa yang bisa dicapai?
Anda hanya perlu mengandalkan satu elemen HTML dan gambar terkait untuk membuat hal-hal seperti beberapa warna latar belakang, beberapa gambar latar belakang, kliping gambar latar belakang, pembalikan gambar, model kotak yang dapat diperluas menggunakan batas gambar, dan kolom palsu mengambang (catatan Xiaozhi: Tiga kolom efek ketinggian yang sama (yang akan disebutkan nanti), model gambar di luar kotak, multi-batas yang ditampilkan di luar, dan efek populer lainnya. Mungkin memerlukan 2 gambar konten tambahan dalam konten yang dihasilkan.
Berbagai latar belakang menggunakan CSS2.1 dan beberapa batas menggunakan halaman demo CSS2.1 akan menunjukkan cara menggunakan teknologi objek semu CSS2.1 untuk mencapai efek populer ini.
Kebanyakan struktur mengandung elemen anak. Oleh karena itu, sering kali, Anda dapat menampilkan lebih banyak efek melalui elemen semu yang merupakan elemen anak pertama dari elemen induk (ditetapkan menjadi elemen anak terakhir). Selain itu, Anda juga dapat menggunakan :hover untuk menghasilkan beberapa efek interaktif yang kompleks pada gaya.