Позадина-филтер - ЦСС-трикови

Anonim

backdrop-filterИмовина у ЦСС се користи за примену филтера ефекте ( 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део је Нацрта уредника модула ефеката филтра 2 и званично није део било које спецификације. Подршка за прегледач је тренутно ограничена (погледајте „Подршка за прегледаче“ у наставку).

Синтакса

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

може бити било шта од следећег:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (за примену СВГ филтера)

Можете да примените више с на позадину, на пример:

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

Погледајте радни нацрт модула ефеката филтра В3Ц за прихватљиве вредности за сваку од функција филтера.

Пример

За свеобухватан поглед на функције филтера и сјајне начине њиховог заједничког коришћења, погледајте чланак filterалманаха на ЦСС-триковима.

Следећа оловка је растављена из примера у истраживању чланка Робин Рендле-а backdrop-filter.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
76 Не Не 17 9 *

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

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 Не 81 9,0-9,2 *

Повезан

  • filter

Ресурси

  • Својство позадине-филтер Робин Рендле
  • МДН унос на позадини-филтер