Размытие фона css3. Фильтр размытие - blur. Поддержка старых версий IE

main.de-emphasized {
filter: blur(5px);
}

Как подтверждает рисунок ниже, это уже огромный шаг вперед. Однако сейчас размытие применяется немедленно, что выглядит не слишком естественно и ухудшает впечатление пользователя от взаимодействия со страницей. Поскольку фильтры CSS поддерживают анимацию, мы можем заставить размытие страницы проявляться плавно и постепенно:
main {
transition: .6s filter;
}
main.de-emphasized {
filter: blur(5px);
}

Часто бывает полезно комбинировать два эффекта снижения значимости (затемнение и размытие).
Один из способов сделать это - использовать фильтры brightness() и/или contrast() :

main.de-emphasized {
filter: blur(3px) contrast(.8)
brightness(.8);
}

Результат вы видите на рисунке. Затемнение посредством фильтров CSS означает, что если они не поддерживаются, то никакое резервное решение не применяется. Возможно, затемнение лучше воплощать с помощью какого-нибудь другого метода, который также может служить резервным решением (например, используя свойство box-shadow , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

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

Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

В CSS3 есть множество новых свойств, которые могут значительно ускорить вёрстку тех или иных элементов страницы. Например, css-фильтры, об одном из которых сегодня предлагается поговорить.

Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на странице. Зачастую для его создания используется jQuery-библиотека bjurjs . Однако, не на всех сайтах целесообразно использовать jQuery, да и технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?

Пример простейшей разметки:

Итак, задан родительский div с классом wrapper , служащий контейнером для двух вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur - изображение, к которому нужно применить эффект размытия.

Обратимся к стилям.

Wrapper { position : relative ; width : 500px ; height : 500px ; margin : 0 auto ; } .inner-wrapper , .blur { position : absolute ; width : 500px ; height : 300px ; left : 0 ; top : 0 ; bottom : 0 ; right : 0 ; }

Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на одном уровне. Дело в том, что эффект размытия будет применяться и к тексту приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением блоков относительно друг друга при помощи z-index . Сделаем это, а также зададим необходимый бэкгрануд для.blur:

Inner-wrapper { z-index : 100 ; color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; }

На данный момент получаем простейшую страничку с картинкой и текстом:

Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:

и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр всего один: тот, что определён под id blur . Вот как должен быть преобразован css-код для получения эффекта размытия:

Inner-wrapper { z-index : 100 ; /* текст не размыт */ color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; /* изображение размыто */ background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; -webkit-filter : blur (5px ); -moz-filter : blur (5px ); filter : blur (5px ); filter : url("blur.svg#blur") ; /* путь к svg */ }

А вот и итоговый вариант с применением эффекта размытия:

Единственный недостаток: нечёткие границы размытия, которые выходят за пределы родительского элемента. Часто такой побочный эффект может быть нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden .

Этот ответ предназначен для макета горизонтальной карты Material Design с динамической высотой и изображением.

Чтобы предотвратить искажение изображения из-за динамической высоты карты, вы можете использовать фоновое изображение заполнителя с размытием, чтобы отрегулировать изменения высоты.

объяснение

• Карта содержится в
  с оболочкой класса, которая является flexbox.
• Карта состоит из двух элементов, изображения, которое также является ссылкой и содержанием.
• Ссылка , ссылка класса, позиционируется относительно .
• Ссылка состоит из двух подэлементов, разметки разметки
  и class pic, который является четким изображением.
• Оба они позиционируются как абсолютные и имеют width: 100% , но класс pic имеет более высокий порядок стека, т. z-index: 2 , который помещает его выше заполнителя.
• Фоновое изображение для размытого заполнителя задается с помощью встроенного стиля в HTML.

Код

Wrapper { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23); background-color: #fff; margin: 1rem auto; height: auto; } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { display: block; width: 200px; height: auto; overflow: hidden; position: relative; border-right: 2px solid #ddd; } .blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .pic { width: calc(100% - 20px); max-width: 100%; height: auto; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .pic:hover { transition: all 0.2s ease-out; transform: scale(1.1); text-decoration: none; border: none; } .content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 20px; overflow-x: hidden; } .text { margin: 0; }

Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.

• Копия размытого изображения в качестве фона.
• Псевдоэлемент, который может быть отфильтрован, затем расположен за содержимым.

Вы также можете использовать backdrop-filter

Существует поддерживаемое свойство, называемое backdrop-filter , которое в настоящее время поддерживается в Edge , Safari и iOS Safari (см. caniuse.com для статистики).

Свойство backdrop-filter обеспечивает эффекты, такие как размытие или цвет, смещающие область за элементом, которую затем можно увидеть через этот элемент, регулируя прозрачность / непрозрачность элемента.

Вы бы использовали его так:

Box { -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ backdrop-filter: blur(5px); // No one supports non prefixed yet }

2018-12-25T00:00Z

Вам придется использовать два разных контейнера: один для фонового изображения, а другой для вашего контента.

В примере я создал два контейнера: .background-image и.content .

Оба они размещены с position: fixed и left: 0; right: 0; left: 0; right: 0; , Разница в их отображении происходит из значений z-index которые были установлены по-разному для элементов.