Как указано в других ответах, это может быть достигнуто с помощью:
- Копия размытого изображения в качестве фона.
- Псевдоэлемент, который может быть отфильтрован и размещен за контентом.
Существует поддерживаемое свойство, которое называется backdrop-filter
и в настоящее время поддерживается в Chrome 76, Edge , Safari и iOS Safari ( статистику см. В разделе caniuse.com ).
Из Mozilla Devdocs :
Свойство фонового фильтра обеспечивает такие эффекты, как размытие или смещение цвета области за элементом, которые затем можно увидеть через этот элемент, отрегулировав прозрачность / непрозрачность элемента.
Смотрите caniuse.com для статистики использования.
Вы бы использовали это так:
.background-filter::after {
-webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
backdrop-filter: blur(5px); /* Supported in Chrome 76 */
content: "";
display: block;
position: absolute;
width: 100%; height: 100%;
}
.background-filter {
position: relative;
}
.background {
background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
width: 200px;
height: 200px;
}
<div class="background background-filter"></div>
Обновление (12/06/2019) : Chromium будет поставляться с backdrop-filter
включенным по умолчанию в версии 76, которая должна быть выпущена 30/07/2019 .
Обновление (01/06/2019) : команда Mozzilla Firefox объявила, что скоро приступит к ее реализации.
Обновление (21/05/2019) : только что анонсированный Chromium backdrop-filter
доступен в Chrome Canary без флажка «Включить функции экспериментальной веб-платформы». Это означает, что backdrop-filter
это очень близко к реализации на всех платформах Chrome.