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

blur fonksiyonu,
arkayı bulanıklaştırır
brightness fonksiyonu,
arka plana parlaklık verir
contrast fonksiyonu,
arka plana kontrastlık verir
drop-shadow fonksiyonu,
arka plana gölge verir
hue-rotate fonksiyonu,
arka plana renk tonu döndürme verir
invert fonksiyonu,
arka plan renklerini tersine çevirir
sepia fonksiyonu,
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