Filtr tła - CSS-Tricks

Anonim

backdrop-filterNieruchomość w CSS służy zastosować efekty filtrów ( grayscale, contrast, bluritp) do tła / tło elementu. backdrop-filterMa taki sam efekt jak filternieruchomości, z wyjątkiem skutków filtry są stosowane tylko do tła i zamiast do zawartości elementu.

Klasyczny przykład:

Filtrowane tła bez filtra tła

Wcześniej backdrop-filterjedynym sposobem dodania przefiltrowanego tła było dodanie oddzielnego elementu „tła”, umieszczenie go za elementami pierwszego planu i przefiltrowanie go w następujący sposób:

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

Ta backdrop-filterwłaściwość umożliwia wyeliminowanie tego dodatkowego elementu „tła” i bezpośrednie zastosowanie filtrów do tła:

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

W chwili pisania tego tekstu backdrop-filterjest częścią szkicu redaktora modułu efektów filtrów 2 i nie jest oficjalnie częścią żadnej specyfikacji. Obsługa przeglądarek jest obecnie ograniczona (patrz „Obsługa przeglądarek” poniżej).

Składnia

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

może być jedną z następujących:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (do stosowania filtrów SVG)

Możesz zastosować wiele znaków do tła, na przykład:

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

Zobacz wersję roboczą modułu efektów filtrów W3C, aby poznać dopuszczalne wartości dla każdej z funkcji filtra.

Przykład

Aby zapoznać się z funkcjami filtrującymi i sprytnymi sposobami ich wspólnego używania, zobacz filterwpis almanachu na temat sztuczek CSS.

Poniższy Pen jest rozwidlony z przykładu z artykułu Robina Rendle'a eksplorującego backdrop-filter.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
76 Nie Nie 17 9 *

Telefon komórkowy / tablet

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

Związane z

  • filter

Zasoby

  • Właściwość backdrop-filter Robina Rendle'a
  • Wpis MDN na filtrze tła