CSS Transparanlık (opacity) - CSS Dersleri

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:



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);
   }
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



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>