CSS Background Image Aplicar un filtro a una imagen de fondo

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:

  1. La capa superior: una miniatura 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. ¡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.

Otras propiedades para el background

CSS Background

https://css-tricks.com/snippets/css/transparent-background-images/

No hay una propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con una opacidad regular del tamaño exacto del elemento detrás de él. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: “”; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index:

Ver más »
CSS Background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de

Ver más »
CSS Background

Nueva encuesta: el caso del desorden gigante

Suponga que ha diseñado una página web y utiliza una imagen de fondo de página completa. Realmente te gusta el aspecto del sitio con esta imagen de fondo. El se parece increíble. Pero la imagen es 350k. Ha decidido que aunque sabe que es pesado, vale la pena. Pero luego empiezas a pensar en dispositivos

Ver más »
Ir arriba