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

cssseletor {
  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:

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

Результат:

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