Secara tradisional, warna yang digunakan dalam CSS adalah dalam format heksadesimal atau format rgb, seperti rgb(171,205,239).
CSS3 menghadirkan beberapa cara baru untuk menangani warna, seperti menggunakan saluran HSL (Hue, Saturation, Light) dan opacity/alpha. Sayangnya, saat ini hanya Firefox 3+, Chrome 1.0+ dan Safari 3+ serta beberapa browser turunannya yang mendukung sepenuhnya. Namun kami dapat melakukan yang terbaik, dan IE tidak akan mulai mendukung beberapa properti CSS3 hingga Internet Explorer 9.
Kegelapan
Ini sebenarnya adalah properti lama, dan yang mengejutkan, ini didukung oleh versi IE saat ini—walaupun dengan cara yang lebih rumit.
Opacity membuat seluruh objek CSS transparan, dan transparansi semua elemen turunan akan diwarisi dengan tepat. Sintaks resminya adalah sebagai berikut:
opacity: [0-1 desimal];
Jadi pengaturan opacity: 0.5; akan membuat objek menjadi 50% transparan. Meskipun browser baru secara aktif mendukungnya, browser lama masih memerlukan beberapa kode khusus, seperti Internet Explorer.
Saat ini, untuk versi Firefox yang lebih lama, kita perlu menggunakan awalan -moz-, dan untuk versi Safari/Chrome yang lebih lama, kita perlu menggunakan awalan -webkit-. Untuk Safari versi lama yang masih menggunakan kernel KHTML dan bukan kernel webkit, kita perlu menggunakan -khtml-. Jadi jika kita ingin mendukung setiap browser, kode kita akan terlihat seperti ini:
opacity: 0,5;
-moz-opasitas: 0,5;
-opacity-webkit: 0,5;
-khtml-opasitas: 0,5;
Ah, tunggu sebentar! Apa yang harus dilakukan dengan IE? Ya, IE tidak mendukung ini sama sekali, tetapi menggunakan filter berpemilik. Metode tradisionalnya singkat dan ringkas:
filter:alfa(opasitas=50);
Harap dicatat bahwa untuk IE kita perlu menggunakan bilangan bulat dari 0 hingga 100, bukan desimal seperti atribut opacity. Sayangnya, Internet Explorer 8 menyediakan cara baru untuk menangani hal ini. Jangan mencoba mengingat yang ini seperti yang lainnya, ini panjang:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
Tentu saja, jika Anda ingin mendukung browser IE lama, Anda harus menggunakan browser yang lebih pendek di atas, yang berarti jika Anda ingin kompatibel dengan sebagian besar browser, Anda memerlukan total enam pernyataan CSS.
PS: Sebenarnya Safari sudah mendukung atribut opacity sejak versi 1.2 (2004). Safari dengan inti KHTML pada dasarnya sudah sulit ditemukan lagi. Faktanya, Konqueror tidak pernah mendukung atribut -khtml-opacity, jadi mohon jangan Gunakan itu (Saya mempertimbangkan keutuhan teks asli saat menerjemahkan, jadi saya tidak melakukan koreksi pada kode di atas). Opera telah mendukung opacity CSS3 sejak 9.0, sedangkan Firefox tidak mendukung opacity secara native hingga versi 3.5. Filter -ms- plus IE8 benar-benar merupakan karya jenius dari Microsoft! Namun perlu diperhatikan bahwa jika Anda ingin menggunakan filter dan -ms-filter secara bersamaan, harap diperhatikan bahwa -ms-filter ditulis di depan filter. ——Shenfei