Definición de .backdrop-filter utilizado en CSS
La propiedad .backdrop-filter en CSS se usa para aplicar efectos de filtro (escala de grises, contraste, desenfoque, etc.) al fondo/fondo de un elemento. El .backdrop-filter tiene el mismo efecto que la propiedad del filtro, excepto que los efectos del filtro se aplican solo al fondo y en lugar de al contenido del elemento.
Caso de empleo : propiedad CSS backdrop-filter
Si te gustaría utilizar esta propiedad de CSS en tu stylesheet, hazlo de la siguiente manera:
<div class="wrapper">
<div class="background"></div>
<div class="foreground"></div>
</div>Otro ejemplo más avanzado de .backdrop-filter es el siguiente de CODEPEN:
Sintaxis de .backdrop-filter en CSS
backdrop-filter: none|filter|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | Valor por defecto. No se aplica ningún filtro al fondo. | |
| filtrar | Una lista separada por espacios de funciones de filtro como:
o una URL a un filtro SVG que se aplicará al fondo | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .backdrop-filter
Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| backface-visibility | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 4.0 -webkit- | 23.0 15.0 -webkit- |
