Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS свойство backdrop-filter
позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.
/* Keyword value */
backdrop-filter: none;
/* фильтр URL в SVG */
backdrop-filter: url(commonfilters.svg#filter);
/* значения <filter-function> */
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 |
---|---|
Применяется к | все элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | a filter function list |
Синтаксис
Значения
none
- Фильтр отключен для фона
<filter-function-list>
- Перечень фильтров, разделенных пробелами функций
<filter-function>
или SVG фильтра, которые применены для фона.
Формальный синтаксис
none | <filter-function-list>где
<filter-function-list> = [ <filter-function> | <url> ]+
где
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
где
<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> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )где
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Примеры
CSS
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://lorempixel.com/400/200/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 10}
HTML
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
Результат
Спецификации
Спецификация | Состояние | Комментарий |
---|---|---|
Filter Effects Module Level 2 Определение 'backdrop-filter' в этой спецификации. |
Редакторский черновик | Изначальное определение. |
Совместимость с браузерами
BCD tables only load in the browser