Tutorial CSS gambar transparan / tembus cahaya Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh yang lebih,Contoh 1 - Buat gambar transparan,Contoh 2 - Gambar Transparansi - hover efek,Contoh 3 - Transparan kotak teks,
Menggunakan CSS mudah untuk membuat gambar transparan.
Catatan: properti CSS Opacityadalah bagian dari rekomendasi W3C CSS3.
Membuat gambar transparan - hover efek
Buat kotak teks memiliki gambar latar belakang transparan
Transparansi dalam properti CSS3 adalahopacity.
Pertama, kami akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
gambar normal
Gambar yang sama dengan transparansi:
Pertimbangkan CSS berikut:
IE9, Firefox, Chrome, browser Opera, dan Safari menggunakan sifat transparansi gambar mungkin menjadi buram. nilai properti opacity 0,0-1,0. nilai-nilai yang lebih kecil membuat elemen lebih transparan.
IE8 dan versi sebelumnya menggunakan filter: alpha (opacity = x). X dapat mengambil nilai-nilai 0-100. nilai-nilai yang lebih rendah membuat elemen lebih transparan.
Gerakkan mouse Anda di atas gambar:
gaya CSS:
Blok pertama adalah kode CSS dalam Contoh 1, dan sejenisnya. Selain itu, kami juga menambahkan apa yang terjadi ketika pengguna menggerakkan melayang mouse salah satu gambar. Dalam hal ini, ketika pengguna menggerakkan mouse di atas gambar, kami berharap bahwa gambar jelas.
Ini adalahCSS: opacity = 1.
IE8 danpenggunaan sebelumnya: filter: alpha (opacity = 100 ).
Ketika pointer mouse menjauh dari gambar, gambar akan kembali transparansi.
Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan.
Source code adalah sebagai berikut:
Pertama, kita membuat ketinggian tetap dan lebar elemen div dengan gambar latar belakang dan perbatasan. Kemudian kita membuat elemen div kecil di dalam div pertama. Ini div juga memiliki lebar tetap, warna latar belakang, perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks dalam elemen P.