CSS gambar transparan / tembus cahaya
Menggunakan CSS mudah untuk membuat gambar transparan.
Catatan: properti CSS Opacityadalah bagian dari rekomendasi W3C CSS3.
contoh yang lebih
Membuat gambar transparan - hover efek
Buat kotak teks memiliki gambar latar belakang transparan
Contoh 1 - Buat gambar 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:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
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.
Contoh 2 - Gambar Transparansi - hover efek
Gerakkan mouse Anda di atas gambar:
gaya CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
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.
Contoh 3 - Transparan kotak teks
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:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
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.