backdrop-filter

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Описание

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

Начальное значение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( <rgb-component>#{3} , <alpha-value>? )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> , <alpha-value>? )
<hsla()> = hsla( <hue>, <percentage>, <percentage> , <alpha-value> )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

где
<rgb-component> = <integer> | <percentage>
<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 на данный момент не поддерживает это свойство. См. Chromium bug #497522.

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

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

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

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