Beberapa Background di CSS3

Salah satu masalah terbesar dengan CSS2, adalah ketidakmampuan untuk menambahkan lebih dari satu latar belakang ke bagian tertentu. Ketidakmampuan ini telah diselesaikan dalam CSS3! CSS3 Backgrounds dan Batas Modul di sudah mendapat banyak fitur baru.

Menambahkan beberapa latar belakang dibuat sederhana dengan menggunakan gambar latar belakang beberapa perangkat tambahan di CSS3. Adapun CSS2, kami tentukan di atas Div Div lain untuk mendapatkan beberapa latar belakang. Namun dengan aturan baru dalam CSS3, kita dapat menambahkan beberapa latar belakang untuk satu divisi dalam HTML.

Kita dapat memiliki jumlah lapisan di CSS3. Jumlah lapisan ditentukan oleh jumlah nilai dipisahkan koma dalam properti Latar Belakang.

For example.,

#Multiple
{
border: 2px solid #cccccc;
background:url(image1.gif) center, url(image2.gif) center no-repeat;
height: inherit;
width: inherit;
}

atau kita juga bisa menulis seperti ini,

#Multiple
{
border: 2px solid #cccccc;
background-image: url(image1.gif), url(image2.gif);
background-position: center , center;
background-origin: border-box, content-box;
background-repeat: no-repeat,no-repeat;
height: inherit;
width: inherit;
}

Jika Anda melihat melalui kode, Anda dapat melihat beberapa gambar latar belakang ditempatkan di atas setiap gambar pertama other.The adalah salah satu yang terdekat dengan pengguna. Gambar kedua adalah ditempatkan di belakang yang pertama dan seterusnya.,

Browser yang mendukung berbagai latar belakang CSS3 adalah Firefox 3.6, Opera 10,5 dan Google Chrome versi 3.5. IE menggunakan filter untuk menambahkan beberapa latar belakang!