filter Özelliği

filter özelliği, arka plan resmine belirli bir sanatsal stil veya filtre uygular. Özellik, değer olarak filter fonksiyonuyla oluşturulan sanatsal stil isimlerini veya none'u (seçilen filtrenin iptali) alabilir.

Sözdizimi

seçici {
	filter: sanatsal stil veya none;
}

Örnek

Resmimiz için siyah-beyaz bir filtre uygulayalım, ve üzerine gelindiğinde onu iptal edelim:

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

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

Ayrıca Bakınız

background özelliği,
arka plan için kısayol özelliğidir
blur fonksiyonu,
arka planı bulanıklaştırır
brightness fonksiyonu,
arka planın parlaklığını ayarlar
contrast fonksiyonu,
arka planın kontrastını ayarlar
drop-shadow fonksiyonu,
arka plana gölge ekler
hue-rotate fonksiyonu,
arka planın renk tonunu döndürür
invert fonksiyonu,
arka planın renklerini tersine çevirir
opacity fonksiyonu,
arka planın şeffaflığını ayarlar
sepia fonksiyonu,
arka planı sepya tonlarına dönüştürür