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

cssselector {
  filter: gaya artistik atau none;
}

Contoh

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

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

css#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