Puede aplicar un filtro a un elemento completo con bastante facilidad con el filter propiedad. Pero, ¿y si quieres aplicar un filtro? justa en el fondo de un elemento? Es extrañamente delicado.
Hay propiedades CSS específicas para fondos, como background-blend-mode – pero la mezcla y los filtros no son lo mismo. Esta parece ser la razón por la que tenemos backdrop-filter, pero no del todo. Esto filtra porque el fondo interactúa con lo que es detrás elemento.
No hay background-filter, desgraciadamente. ¿Que debemos hacer?
Usa un pseudoelemento en lugar de un fondo
Si coloca el contenido del elemento en un contenedor interno, puede colocarlo encima de 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.
Descubra cómo se filtra el “fondo” con grayscale ¿Los? Llamamos al filtro de escala de grises allí y lo aplicamos solo al pseudoelemento, dejando el resto del contenido sin filtrar.
Depende del tipo de filtrado que desee … es posible que pueda simularlo con modos de fusión
Encontré este problema porque estaba tratando específicamente de escalar la imagen de fondo de un elemento en escala de grises. Dado que, como hemos visto, no existe una propiedad específica solo para eso, pensé background-blend-mode, especialmente cómo hay opciones de fusión para cosas como saturación y color. Si pudiera establecer el negro puro en la parte superior del gráfico, podría combinarlos, como puedo con múltiples fondos, y básicamente simular un efecto de escala de grises.
Tenga en cuenta que no puede usar un color sólido solo cuando trabaja con varios fondos (esto sería un background-color no background-image), por lo que también tenemos que simular esto con una transició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 abrió paso y creó un bolígrafo exploratorio en el que hay tres capas:
- La capa superior: una miniatura de un
radial-gradient - Capa de en medio: color sólido
- 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. ¡Esto es otra cosa que aprendí! Al igual que puede separar con comas para crear varios fondos (y lo mismo con background-size, background-position y otros para aplicar estos valores a fondos específicos), también puede separar con comas background-blend-mode para aplicar diferentes efectos de mezcla a cada capa.
Vea los fondos múltiples de Pen, múltiples modos de fusión de Dan Wilson (@danwilson) en CodePen.
