Aplicar un filtro a una imagen de fondo

Puede aplicar un filtro a un elemento completo con bastante facilidad con la filterpropiedad. Pero ¿qué pasa si quieres aplicar un filtro sólo al fondo de un elemento? Es extrañamente complicado.

Hay propiedades CSS específicas para fondos, como background-blend-mode, pero la combinación y los filtros no son lo mismo. En cierto modo parece ser la razón por la que lo hemos hecho backdrop-filter, pero no del todo. Eso filtra cuando el fondo interactúa con lo que hay detrás del elemento.

Lamentablemente no existe background-filter. Qué vamos a hacer?

Utilice un pseudoelemento en lugar de un fondo

Si coloca el contenido del elemento en un contenedor interior, puede configurarlo encima de un pseudoelemento que simplemente pretende ser un fondo.

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

¿Ves cómo se filtra el “fondo” grayscaleallí? Allí llamamos al filtro de escala de grises y lo aplicamos solo al pseudoelemento, dejando el resto del contenido sin filtrar.

Depende del tipo de filtrado que desees… es posible que puedas simularlo con modos de fusión

Me encontré con este problema porque intentaba específicamente poner en escala de grises la imagen de fondo de un elemento. Dado que, como hemos comentado, no existe una propiedad específica solo para eso, pensé en background-blend-mode, particularmente en cómo existen opciones de combinación para cosas como la saturación y el color. Si pudiera colocar negro puro sobre la parte superior del gráfico, entonces podría combinarlos, 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 trabaja con múltiples fondos (eso sería un background-colornot background-image), por lo que también tenemos que falsificarlo con un no-transition linear-gradient.

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

Las exploraciones de Dan Wilson

Dan se metió en esto e hizo un bolígrafo exploratorio en el que hay tres capas:

1. Capa superior: una viñeta de unaradial-gradient
2. Capa media: 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. ¡Esa fue otra cosa que aprendí! Así como puede separar por comas para crear múltiples fondos (y de la misma manera con background-sizey background-positionsimilares para aplicar esos valores a fondos específicos), también puede separar por comas background-blend-modepara aplicar diferentes efectos de fusión a cada capa.