CSS ile arkaplanı saydamlaştırma

Uzun zaman sonra bir CSS konusu daha açmaya karar verdim. Daha önceki bloğumda(yani yazdıklarım gitmeden, bloğumun veritabanı silinmedne önce..) bu konu hakkında bir yazım olmuştu.

Tekrar kısada olsa bahsetmek istiyorum. Artık browserların CSS i ne kadar farklı yorumladıklarından bahsetmek istemesem de !  her browser için farklı CSS kodlarına ihtiyaç duyacağız.

div{
background-color:#CCC;
opacity:.70;
filter: alpha(opacity=70);
-moz-opacity:0.70;
}

Yukarıdaki kodlar ile istediğiniz bir div’ e veya HTML elementinin arkaplanına saydamlık efekti verebilirsiniz. Burada verdiğimiz 70 değeri 100 üzerinden değerlendiriliyor. yani 100 tam opak olurken, 1 değeri ise tam saydam oluyor. Bunun haricinde;

Firefox tarayıcısında saydamlık verebilmek için:

div { -moz-opacity:0.70; }

Opera tarayıcısında saydamlık verbilmek için:

div { filter: alpha(opacity=70); }

Explorer tarayıcısında saydamlık verebilmek için:

div {opacity:.70; }

Örneği inceleyin. Kullandığınız tarayıcıya göre saydamlık değeri farklılaşacak.

Saydamlık için benim yaptığım şu sitedeki örneğe de göz atabilirsiniz.