Filtr pozadí - Triky CSS

Anonim

backdrop-filterNemovitost v CSS slouží k aplikovat efekty filtru ( grayscale, contrast, blur, atd) do pozadí / pozadí prvku. The backdrop-filterhas the same effect as the filterproperty, except the filter effects are applied only to the background and instead of to the element's content.

Klasický příklad:

Filtrovaná pozadí bez filtru pozadí

backdrop-filterJediným způsobem, jak přidat filtrované pozadí, bylo dříve přidat samostatný prvek „pozadí“, umístit jej za prvky v popředí a filtrovat jej takto:

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

backdrop-filterVlastnost umožňuje odstranit tuto extra „na pozadí“ prvek a použít filtry na pozadí přímo:

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

V době psaní tohoto článku backdrop-filterje součástí konceptu editoru Filter Effects Module 2 a není oficiálně součástí žádné specifikace. Podpora prohlížeče je aktuálně omezená (viz níže „Podpora prohlížeče“).

Syntax

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

může být některý z následujících:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (pro použití filtrů SVG)

Na pozadí můžete použít více s, například:

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

Přijatelné hodnoty pro každou z funkcí filtru najdete v pracovním konceptu modulu efektů filtru W3C.

Příklad

Komplexní pohled na funkce filtrů a šikovné způsoby jejich společného použití naleznete v filteralmanachu v CSS-Tricks.

Následující pero je vidlicové z příkladu v článku Robina Rendleho zkoumání backdrop-filter.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
76 Ne Ne 17 9 *

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Ne 81 9,0-9,2 *

Příbuzný

  • filter

Zdroje

  • Vlastnost filtru pozadí od Robina Rendleho
  • Záznam MDN na filtru pozadí