Filtro de fundo - CSS-Tricks

Anonim

A backdrop-filterpropriedade em CSS é usado para aplicar efeitos de filtro ( grayscale, contrast, blur, etc.) para o fundo / contexto de um elemento. O backdrop-filtertem o mesmo efeito que a filterpropriedade, exceto que os efeitos do filtro são aplicados apenas ao plano de fundo e não ao conteúdo do elemento.

Exemplo clássico:

Fundos filtrados sem filtro de fundo

Antes backdrop-filter, a única maneira de adicionar um fundo filtrado era adicionar um elemento de "fundo" separado, posicioná-lo atrás do (s) elemento (s) de primeiro plano e filtrá-lo assim:

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

A backdrop-filterpropriedade permite que você elimine esse elemento de “fundo” extra e aplique filtros diretamente ao fundo:

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

No momento em que este artigo foi escrito, backdrop-filterfaz parte do Rascunho do Editor do Módulo de efeitos de filtro 2 e não faz parte oficialmente de nenhuma especificação. O suporte do navegador é atualmente limitado (consulte “Suporte do navegador” abaixo).

Sintaxe

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

pode ser qualquer um dos seguintes:

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

Você pode aplicar vários s a um pano de fundo, assim:

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

Consulte o esboço de trabalho do módulo de efeitos de filtro do W3C para obter os valores aceitáveis ​​para cada uma das funções de filtro.

Exemplo

Para uma visão abrangente das funções de filtro e maneiras interessantes de usá-los juntos, consulte a filterentrada do almanaque em CSS-Tricks.

A caneta a seguir foi derivada de um exemplo explorado no artigo de Robin Rendle backdrop-filter.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
76 Não Não 17 9 *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Não 81 9,0-9,2 *

Relacionado

  • filter

Recursos

  • A propriedade de filtro de fundo de Robin Rendle
  • Entrada MDN no filtro de fundo