Filtro de fondo - Trucos CSS

Tabla de contenido

La backdrop-filterpropiedad en CSS se utiliza para aplicar efectos de filtro ( grayscale, contrast, blur, etc.) al fondo / contexto de un elemento. El backdrop-filtertiene el mismo efecto que la filterpropiedad, excepto los efectos de filtro se aplican sólo a los antecedentes y en lugar de con el contenido del elemento.

Ejemplo clásico:

Fondos filtrados sin filtro de fondo

Antes backdrop-filter, la única forma de agregar un fondo filtrado era agregar un elemento de "fondo" separado, colocarlo detrás de los elementos de primer plano y filtrarlo así:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

La backdrop-filterpropiedad le permite eliminar este elemento de "fondo" adicional y aplicar filtros al fondo directamente:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

En el momento de redactar este artículo, backdrop-filterforma parte del borrador del editor del módulo de efectos de filtro 2 y no forma parte oficialmente de ninguna especificación. La compatibilidad con el navegador es actualmente limitada (consulte "Compatibilidad con el navegador" a continuación).

Sintaxis

.element ( backdrop-filter: ()* | none )

puede ser cualquiera de los siguientes:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (para aplicar filtros SVG)

Puede aplicar varios mensajes de correo electrónico a un fondo, así:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Consulte el Borrador de trabajo del módulo de efectos de filtro del W3C para conocer los valores aceptables para cada una de las funciones de filtro.

Ejemplo

Para obtener una visión completa de las funciones de filtro y formas ingeniosas de usarlas juntas, consulte la filterentrada del almanaque en CSS-Tricks.

El siguiente lápiz se bifurca de un ejemplo en el artículo de exploración de Robin Rendle backdrop-filter.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
76 No No 17 9 *

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 No 81 9,0-9,2 *

Relacionado

  • filter

Recursos

  • La propiedad de filtro de fondo de Robin Rendle
  • Entrada MDN en el filtro de fondo

Articulos interesantes...