Css

CSS İleri Düzey – CSS Opaklı (Image Opacity / Transparency)

CSS İleri Düzey – CSS Opaklı (Image Opacity / Transparency)

Opaklık CSS özelliği, bir elemanın şeffaflığını belirtir. Bu CSS özelliği sayesinde kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.

Internet Explorer için saydamlık “filter” özelliği ile sağlanır, “0” ile “100” arası saydamlık değeri verilebilir.

Diğer tarayıcılar (Firefox, Safari, Chrome, Opera ve IE9) için ise “opacity” özelliği kullanılır ve “0.0” ile “1.0” arası saydamlık değeri alabilir. Kodumuzun her tarayıcıda aynı sonucu vermesini istiyorsak her iki özelliği birden kullanmalıyız.

Örnek:

Görselimizin normal halini görelim…

Resim Normal Hali

Resim Normal Hali

Görselimizin saydam özelliği almış halini görelim…

Resimin Saydam Hali

Resimin Saydam Hali

Saydam örneğimizin CSS kodunu görelim…

Not: IE’deki alfa filtreleri, 0 ila 100 arasındaki değerleri kabul eder. Değer “0”, öğeyi tamamen saydam yapar (yani% 100 saydam), değer  “100” ise öğeyi tamamen opak yapar (yani %0 saydam).

 

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap