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
selector {
filter: art style or none;
}
Example
Let's set a black and white filter for our image, and cancel it on 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;
}
:
See also
-
the
backgroundproperty
that is a shorthand property for a background -
the
blurfunction
that blurs a background -
the
brightnessfunction
that sets a background brightness -
the
contrastfunction
that sets a background contrast -
the
drop-shadowfunction
that sets a background shadow -
the
hue-rotatefunction
that sets a background hue -
the
invertfunction
that inverts background colors -
the
opacityfunction
that sets a background opacity -
the
sepiafunction
that converts a background to sepia
