The filter property

The filter property gives a background image a specific art style or filter. The property can take as values ​​the names of art styles generated by the filter function or none (cancels a selected filter).

Syntax

cssselector {
  filter: art style or none;
}

Example

Let's set a black and white filter for our image, and cancel it on 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;
}

Результат:

See also