CSS'te opacity özelliğini kullanarak bir ögenin saydamlığını değiştirebiliyoruz. (Vereceğim ufak kod, gelmiş geçmiş tüm tarayıcıları destekleyecek.) Bunun için kullanılacak kod şöyle:

opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;


Görüldüğü gibi bu kod 4 parçadan oluşuyor.

opacity: 0.5; En önemli parça. CSS'teki mevcut saydamlık ayarıdır. Firefox, Safari ve Opera'da çalışmaktadır.
filter:alpha(opacity=50); Internet Explorer için bunu kullanmalısınız :)
-moz-opacity: 0.5; Netscape Navigator gibi eski Mozilla tarayıcıları için bunu kulanıyoruz.
-khtml-opacity: 0.5; Safari'nin eski versiyonları için de bunu kullanıyoruz.

Peki nasıl kullanabiliriz?
Genelde bu kod bir ögenin imleç ile üzerine gelindiğinde aydınlık gelmesi gibi bir şekilde kullanılıyor. Mesela:



CSS Opacity Ayarı









Bunu yaptığımızda class'ı saydam olarak tanımlanmış ve bağlantı verilmiş tüm resimler yarı saydam olacak, üzerine gelindiğinde tamamen mat olacak. Hover olayı gerçekleştiğinde saydamlık ayarına gerek kalmaycağından ona bir şey yazmadım. Ben kendi blogumda sosyal ikonlar ve arkadaş başlantılar bölümünde kullanıyorum.