invert Fonksiyonu

invert fonksiyonu, arka plan görüntüsündeki renkleri tersine çevirmenize olanak tanır. 0 değeri, görüntünün orijinal halinde kalacağını belirtir. 100% veya 1 değeri arka plan renklerini tamamen tersine çevirir. Bu aralıkta yer alan herhangi bir sayı renkleri kısmen tersine çevirir. Negatif bir değer belirtilemez. Varsayılan değer 0'dır.

Sözdizimi

seçici {
	filter: invert(sayı);
}

Örnek

Görselimizin renklerini 50% değerine kadar tersine çevirelim:

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi ise görselimizin renklerini 100% değerine kadar tersine çevirelim:

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi de invert fonksiyonuna 0 değerini verelim:

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ayrıca Bakınız

blur fonksiyonu,
arka planı 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 uygular
opacity fonksiyonu,
arka plana saydamlık verir
sepia fonksiyonu,
arka planı sepya tonlarına 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
filter özelliği,
arka plan için stil tanımlar