Untuk pengunjung yang menggunakan browser Mozilla Firefox kita memerlukan properti opacity:nilai. Nilai yang kita masukkan adalah berkisar antara 0.0 - 1.0. Semakin rendah nilai akan membuat semakin transparan. Sedangkan untuk pengunjung yang menggunakan browser Internet Explorer, kita akan menggunakan properti filter:alpha(opacity=nilai). Nilai yang dimasukkan adalah berkisar antara 0 - 100. Semakin rendah nilai akan membuat semakin transparan.
Berikut image tidak transparan
Kemudian image yang sama dengan opacity 0.4 akan menghasilkanKita juga dapat memanfaatkan ilmu pada saat kita mengenal event pada Javascript sehingga opacity menjadi 0.4 dan pada saat mouse berada diatas image, image berubah menjadi tidak transparan dengan
<img src="margonet.png" style="opacity:0.4;filter:alpha(opacity=40)"akan menghasilkan (geser mouse ke arah gambar)
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Atau bisa juga membuat sebuah boks berisikan teks dengan tampilan yang transparan dan background disekitarnya yang tidak transparan.
<html>maka akan menghasilkan
<head>
<style type="text/css">
div.background
{
width:150px;
height:150px;
background:url("http://margoutomo.net/wp-content/uploads/margonet.png") no-repeat scroll center center transparent;
border:2px solid black;
}
div.transbox
{
width:140px;
height:50px;
margin:50px auto;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:12px 8px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div>
<div>
<p>MargoUtomo.Net
</p>
</div>
</div>
</body>
</html>