Fonas-filtras - CSS-gudrybės

Anonim

backdrop-filterCSS turtas naudojamas taikyti filtro efektus ( grayscale, contrast, blur, ir tt) į fono / fone elemento. Tai backdrop-filterturi tą patį poveikį kaip ir filternuosavybė, išskyrus tai, kad filtro efektai taikomi tik fonui, o ne elemento turiniui.

Klasikinis pavyzdys:

Filtruoti fonai be fono filtro

Anksčiau backdrop-filtervienintelis būdas pridėti filtruotą foną buvo pridėti atskirą elementą „fonas“, pastatyti jį už priekinio elemento (-ų) ir filtruoti taip:

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

backdrop-filterNuosavybė leidžia jums pašalinti šį ekstra "fono" elementas ir pritaikyti filtrus, norėdami tiesiogiai foną:

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

Rašymo metu backdrop-filteryra „Filter Effects Module 2“ redaktoriaus projekto dalis ir oficialiai nėra jokios specifikacijos dalis. Naršyklės palaikymas šiuo metu yra ribotas (žr. „Naršyklių palaikymas“ toliau).

Sintaksė

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

gali būti bet kuris iš šių:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (skirtas naudoti SVG filtrus)

Fone galite pritaikyti keletą s, pavyzdžiui:

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

Žr. W3C filtro efektų modulio darbo juodraštį, kuriame pateikiamos priimtinos kiekvienos filtro funkcijos vertės.

Pavyzdys

Norėdami išsamiai sužinoti filtro funkcijas ir puikius būdus, kaip jas naudoti kartu, žr. filterAlmanacho įrašą CSS-Tricks.

Šis rašiklis yra išpjautas iš Robino Rendle straipsnio, kuriame nagrinėjamas pavyzdys backdrop-filter.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
76 Ne Ne 17 9 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 Ne 81 9,0–9,2 *

Susijęs

  • filter

Ištekliai

  • Robino Rendle fono filtro ypatybė
  • MDN įrašas fone-filtras