Sintaks Latar Belakang Ganda - Trik CSS

Anonim

Browser yang mendukung banyak latar belakang (WebKit sejak awal, Firefox 3+) menggunakan sintaks seperti ini:

#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )

Mereka adalah nilai yang dipisahkan koma dan bisa ada sebanyak yang Anda inginkan dengan nilai URL, posisi, dan pengulangan yang berbeda. Anda bahkan dapat menggabungkan gradien WebKit ke dalam campuran:

#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )

IE sekolah lama di Mac akan menampilkan latar belakang pertama dalam daftar, tetapi browser lain yang tidak mendukungnya gagal keras dan hanya tidak menampilkan latar belakang. Ini menjadikannya kasus yang sulit untuk peningkatan progresif. Artinya, kecuali Anda menggunakan alat seperti Modernizr untuk mendeteksi dukungannya dan menulis pemilih fallback yang hanya mendeklarasikan satu latar belakang untuk browser yang tidak mendukungnya.