Propiedad filter

La propiedad filter aplica un estilo artístico o filtro específico a la imagen de fondo. La propiedad puede aceptar como valores nombres de estilos artísticos, formados por la función filter o none (cancelar el filtro seleccionado).

Sintaxis

cssselector {
  filter: estilo-artístico o none;
}

Ejemplo

Apliquemos un filtro blanco y negro a nuestra imagen, y al pasar el cursor lo cancelemos:

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

Результат:

Véase también

propiedad background,
que representa una propiedad abreviada para el fondo
función blur,
que difumina el fondo
función brightness,
que establece el brillo del fondo
función contrast,
que establece el contraste del fondo
función drop-shadow,
que aplica una sombra al fondo
función hue-rotate,
que establece la tonalidad del fondo
función invert,
que invierte los colores del fondo
función opacity,
que establece la transparencia del fondo
función sepia,
que convierte el fondo a sepia