opacity Fonksiyonu
opacity fonksiyonu,
arka plan görüntüsünün saydamlığını değiştirmeye izin verir.
100% veya 1 değeri,
görüntüye orijinal saydamlığını bırakır.
0 değeri,
görüntünün tamamen saydam olacağını belirtir.
Bu aralıkta yer alan herhangi bir sayı,
arkanın kısmi saydamlığını ayarlar.
Negatif bir değer ayarlanamaz.
Varsayılan değer 1'dir.
Sözdizimi
seçici {
filter: opacity(sayı);
}
Örnek
Görselimize 50% saydamlık ayarlayalım:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Örnek
Şimdi saydamlığı 100% olarak ayarlayalım:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Örnek
Şimdi opacity fonksiyonuna
0 değerini verelim:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ayrıca Bakınız
-
blurfonksiyonu,
arkayı bulanıklaştırır -
brightnessfonksiyonu,
arka plana parlaklık verir -
contrastfonksiyonu,
arka plana kontrastlık verir -
drop-shadowfonksiyonu,
arka plana gölge verir -
hue-rotatefonksiyonu,
arka plana renk tonu döndürme verir -
invertfonksiyonu,
arka plan renklerini tersine çevirir -
sepiafonksiyonu,
arka planı sepya'ya dönüştürür -
backgroundözelliği,
arka plan için kısaltma özelliğidir -
background-imageözelliği,
bir bloğa arka plan resmi vermek için kullanılır