Фон-филтър - CSS-трикове

Anonim

На backdrop-filterсобственост в CSS се използва за прилагане филтърни ефекти ( grayscale, contrast, blur, и т.н.) към фон / фона на елемент. The backdrop-filterима същия ефект като filterсвойството, с изключение на ефекта на филтъра, който се прилага само към фона и вместо към съдържанието на елемента.

Класически пример:

Филтрирани фонове без фонов филтър

Преди backdrop-filterединственият начин да добавите филтриран фон беше да добавите отделен елемент „фон“, да го позиционирате зад елементите на преден план и да го филтрирате така:

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

В backdrop-filterимота Ви позволява да се премахне тази екстра "фон" елемент и се прилагат филтри за фона директно:

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

По време на писането backdrop-filterе част от Чернова на редактора на филтърни ефекти на модул 2 и не е официално част от спецификацията. Понастоящем поддръжката на браузъра е ограничена (вижте „Поддръжка на браузър“ по-долу).

Синтаксис

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

може да бъде едно от следните:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (за прилагане на SVG филтри)

Можете да приложите няколко s към фона, така:

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

Вижте работния проект на модула за ефекти на филтъра W3C за приемливи стойности за всяка от функциите на филтъра.

Пример

За изчерпателен поглед върху функциите на филтъра и чудесните начини да ги използвате заедно, вижте filterзаписа в алманаха на CSS-трикове.

Следващата писалка е раздвоена от пример в изследването на статията на Робин Рендъл backdrop-filter.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
76 Не Не 17 9 *

Мобилен / таблет

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

Свързани

  • filter

Ресурси

  • Свойството на фона-филтър от Робин Rendle
  • MDN запис на фона-филтър