Aplicar un filtro a una imagen de fondo | Programar Plus

Puede aplicar un filtro a un elemento completo con bastante facilidad con el filter propiedad. Pero, ¿qué sucede si desea aplicar un filtro solo al fondo de un elemento? Es extrañamente complicado.

Hay propiedades CSS específicas para los fondos, como background-blend-mode – pero la mezcla y los filtros no son lo mismo. Parece ser la razón por la que tenemos backdrop-filter, pero no del todo. Eso filtra cuando el fondo interactúa con lo que está detrás del elemento.

No hay background-filter, Desafortunadamente. Qué vamos a hacer?

Usa un pseudoelemento en lugar de un fondo

Si coloca el contenido del elemento en un contenedor interno, puede configurarlo sobre un pseudoelemento que simplemente pretende ser un fondo.

.module {
  position: relative;
}
.module::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(graphic-to-be-filtered.jpg);
  filter: grayscale(100%);
}
.module-inside {
  /* This will make it stack on top of the ::before */
  position: relative;
}

Consulte el filtro Aplicar lápiz al elemento Psuedo de Chris Coyier (@chriscoyier) en CodePen.

Vea cómo se filtra el “fondo” con grayscale ¿allí? Llamamos al filtro de escala de grises allí y lo aplicamos solo al pseudoelemento, dejando el resto del contenido dentro sin filtrar.

Depende del tipo de filtrado que desee … es posible que pueda simularlo con modos de fusión

Me encontré con este problema porque estaba tratando específicamente de escalar la imagen de fondo de un elemento en escala de grises. Dado que, como hemos cubierto, no existe una propiedad específica solo para eso, pensé en background-blend-mode, particularmente cómo hay opciones de fusión para cosas como saturación y color. Si pudiera colocar negro puro sobre la parte superior del gráfico, podría mezclarlos, como puedo hacerlo con múltiples fondos, y esencialmente simular un efecto de escala de grises.

Tenga en cuenta que no puede usar un color sólido por sí solo cuando trabaje con varios fondos (eso sería un background-color no background-image), así que tenemos que fingir eso también sin transición linear-gradient.

.module {
  background-image:
    linear-gradient(black, black),
    url(image-to-be-fake-filters.jpg);
  background-size: cover;
  background-blend-mode: saturation;
}

Vea el lápiz Aplicar filtro falso con modo de fusión de Chris Coyier (@chriscoyier) en CodePen.

Exploraciones de Dan Wilson

Dan se metió en esto e hizo un lápiz exploratorio en el que hay tres capas:

  1. La capa superior: una viñeta de un radial-gradient
  2. Capa de en medio: color sólido
  3. Capa inferior: gráfico de imagen

Puede ajustar los colores utilizados en las dos capas superiores y aplicar diferentes modos de fusión a cada una. ¡Eso fue otra cosa que aprendí! Al igual que puede separar por comas para crear varios fondos (y de la misma manera con background-size, background-position y tal para aplicar esos valores a fondos específicos) también puede separar por comas background-blend-mode para aplicar diferentes efectos de fusión a cada capa.

Vea los fondos múltiples de Pen, múltiples modos de fusión de Dan Wilson (@danwilson) en CodePen.

(Visited 16 times, 1 visits today)