by CSS Transparanlık (opacity)
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:
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.
HTML kodumuz ve stillerimiz:
CSS Kodu
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);
}
Fareyle Resmin Transparanlığını Değiştirmek
CSS Kodu
img.stil { opacity: 0.5; filter: alpha(opacity=50); }
img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }
Arkaplan Üzerinde Transparan Yazı
"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?."
HTML kodumuz ve stillerimiz:
HTML Kodu
<html>
<head>
<style type="text/css">
div.background {
width:400px;
height:330px;
background:url('../images/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?."
</p>
</div>
</div>
</body>
</html>