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 (Daha fazla detay) |
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 */
}