CSS kullanarak kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.


Transparan Resim Yaratmak


CSS3'de yer alan opacity kodu resmin şeffaflık oranını ayarlamamızı sağlar:


Kod:
img
{
/* Transparanlık oranı 40% */
opacity: 0.4;


/* IE8 ve aşağısındaki tarayıcılarda sorun çıkmaması için */
filter: alpha(opacity=40);
}


Yukarıda dikkat edildiyse iki kez 40% olduğunu belirttik. Birinci opacity kodumuz tüm güncel tarayıcılar için geçerli. Ancak bu kod Internet Explorer 8 ve aşağısında görüntülenmez. Bu sorunu düzeltmek için IE8 ve aşağı browserların anlayacağı tarz ikinci bir kod yazdık: filter: alpha(opacity=40); Buradaki 40, %40 ı ifade eder.


Fareyle Resmin Transparanlığını Değiştirmek


Kod:
img.stil { opacity: 0.5; filter: alpha(opacity=50); }


img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }




Arkaplan Üzerinde Transparan Yazı


HTML kodumuz ve stillerimiz:


Kod:
<html>
<head>
<style type="text/css">
div.background {
width:400px;
height:330px;
background:url('th_4.jpg') repeat;
border:2px solid black;
}
div.transbox {
width:300px;
height:260px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}
div.transbox p {
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>


<body>


<div class="background">
<div class="transbox">
<p>"Sevdiği kızı bırakıp gurbete gitmişti genç.
Fakat aradan geçen yıllar sevgisinde hiç bir azalışa
neden olmamıştı.Yıllar sonra döndügünde sevdiğinden
şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti,
yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne
kadar vefasızmışsın?."<br /><br />
Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar
akarken cevap verdi:" Ey sevgili! yüzünü görmek benim
için uğruna ölünecek bir hasret iken, o şerefi postacıya
mı bağışlasaydım?!"
</p>
</div>
</div>


</body>
</html>