Фон-фильтр - CSS-хитрости

Anonim

backdrop-filterСвойство в CSS используется для применения фильтра эффектов ( grayscale, contrast, blurи т.д.) для фона / фона элемента. 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является частью проекта редактора Filter Effects Module 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-Tricks.

Следующий Pen является ответвлением из примера в статье Робина Рендла backdrop-filter.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
76 Нет Нет 17 9 *

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 Нет 81 год 9,0-9,2 *

Связанный

  • filter

Ресурсы

  • Свойство backdrop-filter Робина Рендла
  • Запись MDN на фоновом фильтре