Giriş yap

CSS opacity Özelliği
CSS3

Opacity özelliği, bir öğenin opaklığını / saydamlığını belirtir. Ayrıca içeriği gizlemek içinde kullanılır.

Yapısı (Syntax)opacity: sayı | initial | inherit ;

Varsayılan Değer 1
JavaScript Yapısı object.style.opacity="sayı"
Animasyon Özellikleri Uygulanabilir Evet

Değerler

Değer Açıklama Versiyon
sayı Opacity özelliği 0 ile 1 arasında bir değer alabilir. Değer azaldıkça şeffaflık artar. CSS3
0 Öğe tamamen saydamdır (görünmez). CSS3
1 Varsayılan değerdir. Öğe normal bir şekilde görünür. CSS3
initial Varsayılan değerine geri döndürür. CSS3
inherit Değerini üst öğesinden miras alır. CSS3

Örnekler

Bir resim öğesini yarı saydam hale getirelim ;

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE8 ve önceki sürümler için filter özelliği kullanılır.  */
}

Bir elementi tamamen saydam hale getirelim ;

.div {
  opacity: 0;
  filter: alpha(opacity=0); /* IE8 ve önceki sürümler için filter özelliği kullanılır.  */
}

Ayrıca bir elementin RGB kodunun sonuna opacity değerini ekleyerek de saydamlığını ayarlayabiliriz.

div {
  background: rgba(9, 0, 255, 0.5) /* Yarı saydam mavi renkli bir arkaplan */
}

darkwintergrup
81 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar