Css

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

  Css    12 Mayıs 2019
Yorum Yok

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).

 

0 okunma

Etiketler : , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.