MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

backdrop-filter

В процессе перевода.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

Свойство backdrop-filter отвечает за эффекты такие как размытие или смещение цвета для фона.

Начальное значениеnone
Применяется квсе элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typea filter function list
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Keyword value */
backdrop-filter: none;

/* URL в SVG фильтр */
backdrop-filter: url(commonfilters.svg#filter);

/* Фильтры */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Несколько фильтров */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Глобальные значения */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

Значения

none
Фильтр отключен для фона
<filter-function-list>
Перечень фильров, разделенных пробелами которые применены для фона. Список фильтров такой же как и для свойства filter.

Формальный синтаксис

none | <filter-function-list>

где
<filter-function-list> = [ <filter-function> | <url> ]+

где
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

где
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<sepia()> = sepia( <number-percentage> )
<saturate()> = saturate( <number-percentage> )

где
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

где
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(5px)</p>
  </div>
</div>

CSS

.box {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1; 
  backdrop-filter: blur(5px);
  max-width: 50%;
  max-height: 50%;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url('https://pixabay.com/static/uploads/photo/2014/08/26/20/06/lonely-428380_960_720.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

Результат

Спецификации

Спецификация Состояние Комментарий
Filter Effects Module Level 2
Определение 'backdrop-filter' в этой спецификации.
Редакторский черновик Initial definition

Совместимость с браузерами

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Нет[1] Нет[2] ? ? 9.0-webkit
Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Нет ? ? ? ?

[1] Chrome на данный момент поддерживает эту ф-цию только за флагом в chrome://flage. См. Chromium bug #497522.

[2] Gecko на данный момент не поддерживает это свойство. См. баг 1178765.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: odin3
 Обновлялась последний раз: odin3,