Ciri filter

Ciri filter menetapkan gaya artistik atau penapis tertentu kepada imej latar belakang. Ciri ini boleh menerima nama gaya artistik yang dibentuk oleh fungsi filter atau none (pembatalan penapis yang dipilih) sebagai nilai.

Sintaks

pemilih {
	filter: gaya artistik atau none;
}

Contoh

Mari kita tetapkan penapis hitam putih untuk imej kita, dan batalkannya apabila dihover:

<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;
}

Lihat juga

ciri background,
yang merupakan ciri singkatan untuk latar belakang
fungsi blur,
yang mengaburkan latar belakang
fungsi brightness,
yang menetapkan kecerahan untuk latar belakang
fungsi contrast,
yang menetapkan kontras untuk latar belakang
fungsi drop-shadow,
yang menetapkan bayang-bayang untuk latar belakang
fungsi hue-rotate,
yang menetapkan kewarnaan untuk latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi opacity,
yang menetapkan ketelusan untuk latar belakang
fungsi sepia,
yang mengubah latar belakang kepada sepia