Penggunaan lanjutan properti CSS3 RGBA

Penulis：Eve Cole Waktu Pembaruan：2010-03-10 16:01:31

Mari kita bicara tentang penggunaan lanjutan atribut RGBA yang saat ini banyak digunakan di CSS3. Masalah kompatibilitas atribut ini relatif sederhana. IE8 sudah mendukung atribut ini, dan IE6 dan IE7 juga dapat mendukungnya melalui peretasan. RGBA mirip dengan atribut RBG pada CSS2, hanya saja atribut RGBA memiliki tambahan definisi transparansi. Penjelasan atribut RGBA pada standar CSS3 adalah sebagai berikut:

/*Sintaks dasar*/
em { warna : Rgba ( merah , hijau , biru , opasitas ) }
/* Contoh*/
em { warna : rgba ( 255 , 0 , 0 , 1 ) } /* merah, buram */
em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Sama seperti di atas*/

Faktanya, menggunakan tiga nilai desimal dari 1 hingga 255 untuk menentukan suatu warna lebih akurat daripada menggunakan persentase. Berikut ini adalah nilai RGB dari beberapa warna dari 00 ke FF ke Desimal sudah cukup.

Cara menggunakan atribut RGBA

Kekuatan RGBA adalah lebih banyak warna dapat dihadirkan melalui definisi transparansi dan pencampuran warna dalam berbagai lapisan, seperti halnya pencampuran cat. Misalnya, pertama-tama kita menetapkan gambar latar belakang untuk halaman tersebut, lalu menetapkan warna untuk konten di H1 halaman, misalnya:

jam1 {
warna : rgb ( 0 , 0 , 0 ) ;
warna latar belakang : rgb ( 255 , 255 , 255 ) ;
}

Efeknya adalah sebagai berikut:

Di sini Anda dapat melihat bahwa H1 tidak memiliki efek transparan

Namun apa efeknya jika saya tidak mengatur transparansi keseluruhan (atribut opacity) pada H1?

jam1 {
warna : rgb ( 0 , 0 , 0 ) ;
warna latar belakang : rgb ( 255 , 255 , 255 ) ;
opacity : 0,5 ;
}

Efek yang kita lihat di sini adalah seluruh H1 termasuk teksnya 50% transparan. Namun, transparansi teks mempengaruhi pembacaan. Mari kita coba menggunakan atribut RGBA untuk mengatur warna latar belakang H1 secara terpisah.

jam1 {
warna : rgb ( 0 , 0 , 0 ) ;
warna latar belakang : rgba ( 255 , 255 , 255 , 0.5 ) ;
}

Di sinilah kita dapat melihat bahwa latar belakang H1 50% berwarna putih transparan, namun teks di dalamnya masih berwarna hitam buram. Tentu saja, Anda juga dapat membuat teks dalam H1 saja menjadi transparan.

jam1 {
warna : rgba ( 0 , 0 , 0 , 0.5 ) ;
warna latar belakang : rgb ( 255 , 255 , 255 ) ;
}

Membuat hanya teks menjadi transparan dapat digunakan untuk membuat efek potongan kertas. Penggunaan Lebih Banyak

RGBA dapat digunakan dimanapun suatu warna perlu diatur, misalnya:

div {
warna : rgb ( 0 , 0 , 0 ) ;
warna latar belakang : rgb ( 255 , 255 , 255 ) ;
batas : 10px rgba padat ( 255 , 255 , 255 , 0,3 ) ;
}

Atur transparansi menjadi 30% dan batas putih solid dengan lebar garis 10px untuk semua div.

div {
warna : rgba ( 255 , 255 , 255 , 0.8 ) ;
warna latar belakang : rgba ( 142 , 213 , 87 , 0.3 ) ;
}
div : arahkan kursor {
warna : rgba ( 255 , 255 , 255 , 1 ) ;
warna latar belakang : rgba ( 142 , 213 , 87 , 0.6 ) ;
}

Arahkan mouse untuk mengubah transparansi.

Selain itu, jika digabungkan dengan JavaScript, atribut RGBA dapat menciptakan efek yang lebih mempesona.

Mengubah kebiasaan menulis CSS Anda

Dalam contoh di atas Anda dapat melihat bahwa penulis telah menggunakan rgb() untuk menentukan warna daripada menggunakan bentuk representasi heksadesimal #xxx tradisional. Ini adalah metode penulisan yang disiapkan untuk atribut RGBA CSS3. Menggunakan rgb() untuk menentukan warna dapat dipahami sebagai rgba() buram, tetapi perbedaan antara keduanya sangat kecil, yang akan sangat memudahkan untuk meningkatkan ke rgba () di masa depan.

Kompatibel dengan semua browser

Meskipun browser mainstream versi terbaru sudah mendukung atribut RGBA, kita juga harus berhati-hati terhadap pengguna yang menggunakan browser lama, sehingga di beberapa tempat kita akan lebih aman menggunakan cara lama. Ada beberapa metode, dan setiap orang dapat memilih sesuai dengan kebutuhannya.

1. Versi yang lebih rendah tidak menggunakan atribut RGBA.

Meskipun hal ini akan mempengaruhi efek di browser versi yang lebih rendah, ini adalah metode paling sederhana dan metode teraman. Operasi spesifiknya adalah sebagai berikut:

h1 {
warna : rgb ( 127 , 127 , 127 ) ;
warna : rgba ( 0 , 0 , 0 , 0.5 ) ;
}

Atur warna rgb terlebih dahulu kemudian atur warna rgba, sehingga browser yang tidak mendukung atribut rgba hanya akan menampilkan warna rgb, sedangkan browser yang mendukung rgba akan menampilkan warna rgba karena redefinisi.

2. Gunakan gambar PNG transparan sebagai background.

Kelebihan format PNG adalah fitur transparansi pada gambar dapat ditampilkan pada halaman web.

jam1 {
latar belakang : url transparan ( black50.png ) ;
latar belakang : rgba ( 0 , 0 , 0 , 0.5 ) tidak ada ;
}

Efek yang sama seperti rgba dicapai melalui latar belakang PNG dengan transparansi 50%.

3. Peretasan IE

dapat menggunakan atribut pribadi IE untuk menyelesaikan IE6 dan IE7, yang dapat mencapai beberapa efek yang sama seperti rgba.

jam1 {
filter :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ;
}

Yang perlu kita perhatikan adalah nilai StartColorStr dan EndColorStr. Dua digit pertama adalah transparansi heksadesimal, dan enam digit terakhir adalah warna heksadesimal.

Tautan asli: Penggunaan lanjutan atribut CSS3 RGBA.

Terima kasih kepada bolo atas kontribusinya.