backdrop-filter
Властивість CSS backdrop-filter
(фільтр задника) дає змогу застосувати графічні ефекти, як то розмиття чи зсув кольору, до області під елементом. Через те, що вона застосовується до всього під елементом, для того, аби помітити її ефект, необхідно зробити елемент чи його тло принаймні частково прозорим.
Спробуйте його в дії
Синтаксис
/* Значення – ключове слово */
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: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
Значення
none
До задника не застосовується жодний фільтр.
<filter-function-list>
Розділений пробілами список значень
<filter-function>
, або SVG-фільтр, що буде застосовано до задника.
Формальне визначення
Початкове значення | none |
---|---|
Успадковується | ні |
Обчислене значення | as specified |
Формальний синтаксис
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()> | <hwb()> | <lab()> | <lch()> | <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>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )де
<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("anemones.jpg"), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
HTML
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
Результат
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
backdrop-filter
|
Chrome Full support 76 | Edge Full support 17 | Firefox Full support 103 | Internet Explorer No support No | Opera Full support 63 | Safari Full support 9 | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox for Android Full support 103 | Opera Android Full support 54 | Safari on iOS Full support 9 | Samsung Internet Full support 12.0 |