Háttérszűrő - CSS-trükkök

Anonim

Az backdrop-filteringatlan CSS-t használnak szűrőt alkalmazni hatások ( grayscale, contrast, blurstb), hogy a háttérben / hátteret egy elem. Ennek backdrop-filterugyanaz a hatása, mint a filtertulajdonságnak, kivéve, hogy a szűrőeffektusokat csak a háttérre és az elem tartalmára alkalmazzák.

Klasszikus példa:

Szűrt hátterek háttérszűrő nélkül

Korábban backdrop-filtera szűrt háttér hozzáadásának egyetlen módja egy külön „háttér” elem hozzáadása volt, az előtér elem (ek) mögé helyezve és így szűrve:

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

A backdrop-filtertulajdonság lehetővé teszi, hogy kiküszöbölje ezt az extra „háttér” elemet, és szűrőket alkalmazzon közvetlenül a háttérre:

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

Az írás idején backdrop-filtera Filter Effects 2. modul szerkesztő tervezete része, és hivatalosan nem része egyetlen specifikációnak sem. A böngésző támogatása jelenleg korlátozott (lásd alább a „Böngésző támogatás” részt).

Szintaxis

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

lehet az alábbiak bármelyike:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (SVG szűrők alkalmazásához)

Több hátteret is alkalmazhat a háttérbe, például:

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

Az egyes szűrőfunkciók elfogadható értékeit lásd a W3C Filter Effects Module Working Draft-ban.

Példa

A szűrőfunkciók átfogó áttekintését és az együttes használatuk módjait filtera CSS-Tricks almanach bejegyzésében találja meg.

A következő toll egy Robin Rendle cikkében feltárt példából áll backdrop-filter.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
76 Nem Nem 17. 9 *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Nem 81. 9,0–9,2 *

Összefüggő

  • filter

Erőforrások

  • Robin Rendle által készített háttérszűrő tulajdonság
  • MDN bejegyzés a háttérszűrőn