Propriedade filter

A propriedade filter define um estilo artístico ou filtro específico para a imagem de fundo. A propriedade pode aceitar como valores nomes de estilos artísticos, formados pela função filter ou none (cancelamento do filtro selecionado).

Sintaxe

seletor {
	filter: estilo-artístico ou none;
}

Exemplo

Vamos definir um filtro preto e branco para a nossa imagem e cancelá-lo ao passar o mouse:

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

Veja também

a propriedade background,
que representa uma propriedade abreviada para o fundo
a função blur,
que desfoca o fundo
a função brightness,
que define o brilho do fundo
a função contrast,
que define o contraste do fundo
a função drop-shadow,
que define uma sombra para o fundo
a função hue-rotate,
que define a matiz do fundo
a função invert,
que inverte as cores do fundo
a função opacity,
que define a transparência do fundo
a função sepia,
que transforma o fundo em sépia