Properti filter

Properti filter memberikan gaya artistik atau filter tertentu pada gambar latar belakang. Properti dapat menerima nama gaya artistik yang dibentuk oleh fungsi filter atau none (pembatalan filter yang dipilih) sebagai nilai.

Sintaks

selector {
	filter: gaya artistik atau none;
}

Contoh

Mari kita terapkan filter hitam-putih pada gambar kita, dan batalkan saat diarahkan (hover):

<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

properti background,
yang merupakan properti singkatan untuk latar belakang
fungsi blur,
yang mengaburkan latar belakang
fungsi brightness,
yang mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi drop-shadow,
yang memberikan bayangan pada latar belakang
fungsi hue-rotate,
yang mengatur rona warna pada latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi opacity,
yang mengatur transparansi latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia