Filtro sullo sfondo - Trucchi CSS

Anonim

L' backdrop-filterimmobile in CSS viene utilizzato per applicare effetti filtro ( grayscale, contrast, blur, ecc) per lo sfondo / sfondo di un elemento. Lo backdrop-filterha lo stesso effetto della filterproprietà, tranne gli effetti filtro vengono applicate solo per lo sfondo e, invece di al contenuto dell'elemento.

Esempio classico:

Sfondi filtrati senza filtro di sfondo

Prima backdrop-filter, l'unico modo per aggiungere uno sfondo filtrato era aggiungere un elemento "sfondo" separato, posizionarlo dietro gli elementi in primo piano e filtrarlo in questo modo:

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

La backdrop-filterproprietà consente di eliminare questo elemento "sfondo" aggiuntivo e applicare filtri direttamente allo sfondo:

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

Al momento in cui scrivo, backdrop-filterfa parte della bozza dell'Editor di Filter Effects Module 2 e non fa ufficialmente parte di alcuna specifica. Il supporto del browser è attualmente limitato (vedere "Supporto del browser" di seguito).

Sintassi

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

può essere uno dei seguenti:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (per applicare filtri SVG)

Puoi applicare più s a uno sfondo, in questo modo:

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

Vedere la bozza di lavoro del modulo degli effetti del filtro W3C per i valori accettabili per ciascuna delle funzioni del filtro.

Esempio

Per uno sguardo completo alle funzioni di filtro e ai modi ingegnosi per usarle insieme, vedere la filtervoce dell'almanacco su CSS-Tricks.

La penna seguente è biforcuta da un esempio nell'articolo di Robin Rendle che esplora backdrop-filter.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
76 No No 17 9 *

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 No 81 9.0-9.2 *

Relazionato

  • filter

Risorse

  • La proprietà del filtro sullo sfondo di Robin Rendle
  • Voce MDN sul filtro di sfondo