Membuat gambar transparan dengan CSS mudah.
Catatan: Properti opacity CSS adalah bagian dari rekomendasi W3C CSS3.
Membuat gambar transparan – efek Hover
Membuat kotak transparan dengan teks pada gambar latar belakang
Contoh 1 – Membuat Gambar Transparan
Properti CSS3 untuk transparansi adalah opacity.
Pertama kami akan menunjukkan Anda bagaimana untuk membuat gambar transparan dengan CSS.
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, dan Safari menggunakan opacity properti untuk transparansi.
Properti opacity dapat mengambil nilai 0,0-1,0. Sebuah nilai yang lebih rendah membuat
elemen lebih transparan.
IE8 dan sebelumnya menggunakan filter: alpha (opacity = x). X dapat mengambil nilai dari 0 – 100.
Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
Contoh 2 – Transparansi Gambar – Melayanglah Efek
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
CSS untuk ini adalah: opacity = 1.
IE8 dan sebelumnya: filter: alpha (opacity = 100).
Ketika pointer mouse bergerak menjauh dari gambar, gambar akan transparan lagi.
Contoh 3 – Teks dalam Kotak Transparan
<html>
<head>
<style type=”text/css”>
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 elemen div (kelas = “latar belakang”) dengan ketinggian tetap dan lebar, gambar latar belakang, dan perbatasan. Lalu kita membuat sebuah div yang lebih kecil (kelas = “transbox”) di dalam elemen div yang pertama. The “transbox” div memiliki lebar tetap, warna latar belakang, dan perbatasan – dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks di dalam elemen ap.