Как сделать размытый фон css
Обновлено: 04.07.2024
Я хочу Vista / 7-эффект Аэро-стекла на всплывающем окне на моем сайте, и он должен быть динамичным. Я в порядке с этим, не будучи кросс-браузерным эффектом, пока сайт все еще работает на всех современных браузерах.
моей первой попыткой было использовать что-то вроде
однако, как я и ожидал,в результате контент размытого диалога и фон остается ясным. есть ли способ использовать CSS для размытия фона полупрозрачного элемента вместо его содержимого?
OCT. 2016 обновление
С -moz-element() свойство, похоже, широко не поддерживается другими браузерами, кроме FF, есть еще более простой метод для применения размытия, не влияя на содержимое контейнера. Использование псевдоэлементов идеально в этом случае в сочетании с фильтром размытия svg.
(демо было протестировано в FF v49, Chrome v53, Opera 40-IE, похоже, не поддерживает размытие ни с css, ни с svg-фильтром)
единственный способ (до сих пор) иметь эффект размытия в фоновом режиме без плагинов js-это использование -moz-element() свойства в сочетании с svg фильтр размытия. С -moz-element() элемент можно определить как фоновое изображение другого элемента. Затем вы применяете svg фильтр размытия. Необязательно: вы можете использовать jQuery для прокрутки, если ваш фон находится в fixed позиция.
Я понимаю, что это довольно сложное решение и ограничено FF ( element() применяется только к Mozilla на данный момент с -moz-element() свойство), но, по крайней мере, было некоторые усилия в прошлом для реализации в браузерах WebKit и, надеюсь, он будет реализован в будущем.
вы можете использовать псевдо-элемент для позиционирования в качестве фона содержимого с тем же изображением, что и фон, но размытый новым фильтром CSS3.
Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop — то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background — тоже фон, но является частью элемента, к нему и относится свойство background.
Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций. В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).
CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.
Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.
backdrop-filter
В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).
В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).
С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:
Каждый элемент за header`ом размыт на 5px. Это так просто.
Живой пример на JSBin (только Safari 9).
В демо, я использовал для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.
backdrop-filter может повысить читаемость текста, наложенного поверх изображения:
Живой пример на JSBin (только Safari 9).
Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:
Живой пример на JSBin (только Safari 9).
- фон элемента, к которому применен backdrop-filter, должен быть полу-прозрачным. Если нет, то вы никогда не увидите эффект
- есть баг при комбинировании backdrop-filter с любым свойством, которое обрезает элемент (border-radius, mask, clip-path, etc). Это означает, что продвинутые эффекты пока невозможны
- backdrop-filter создает новый контекст наложения, как opacity
- backdrop-filter можно анимировать
- это свойство требует префикс: -webkit-backdrop-filter
filter()
Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.
Живой пример на JSBin (только Safari 9).
Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.
- есть баг с background-size
- функцию можно анимировать
- функция требует префиксi: -webkit-filter()
Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).
OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.
и применим такие стили css:
.blur-block position: relative;
>
.bckgr-blur background-image: url("https://site.com/KARTINKA.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
.str-txt background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
>
Четкий заголовок
Четкий текст за которым размытый фон
Такой вот простой способ размыть фон на CSS. Можно использовать в слайдерах, при hover или в связке с js при разных событиях. Пишите комменты, делитесь статьёй в соц. сетях 😉
Узнать, как создать размытое фоновое изображение с помощью CSS.
Размытое фоновое изображение
Примечание: Этот пример не работает в Edge 12, IE 11 или более ранних версиях.
Создать размытое фоновое изображение
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.bg-image /* Используемое изображение */
background-image: url("photographer.jpg");
/* Добавить эффект размытия */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Полный рост */
height: 100%;
/* Центр и масштаб изображения красиво */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>
Читайте также: