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

Anonim

backdrop-filterВластивість в CSS використовується для застосування фільтра ефектів ( grayscale, contrast, blurі т.д.) для фону / фону елемента. Ефект backdrop-filterмає той самий ефект, що і filterвластивість, за винятком того, що ефекти фільтра застосовуються лише до фону, а не до вмісту елемента.

Класичний приклад:

Відфільтровані фони без фонового фільтра

Раніше backdrop-filterєдиним способом додати відфільтрований фон було додати окремий елемент “background”, розташувати його за елементами переднього плану та відфільтрувати так:

 
.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-Tricks.

Наступне перо роздвоєне на прикладі статті Робіна Рендла, що досліджує backdrop-filter.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
76 Ні Ні 17 9 *

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

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

Пов’язані

  • filter

Ресурси

  • Властивість фільтру задника Робін Рендл
  • Запис MDN на фоновому фільтрі