Как размыть фон на css. Кроссбраузерный эффект размытия изображения с помощью CSS

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

Размытый текст

Этот фильтр можете пока использовать и для размытия текста.

Перевод статьи “Cross-browser Image Blur with CSS ” был подготовлен дружной командой проекта

Этот ответ предназначен для макета горизонтальной карты 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; }

2018-12-04T00:00Z

На вкладке.content в CSS измените ее на position:absolute . В противном случае отображаемая страница не будет прокручиваться.

2018-12-11T00:00Z

Пожалуйста, проверьте приведенный ниже код:

BackgroundImageCVR{ position:relative; padding:15px; } .background-image{ position:absolute; left:0; right:0; top:0; bottom:0; background:url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"); background-size:cover; z-index:1; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .content{ position:relative; z-index:2; color:#fff; }

2018-12-18T00:00Z

Как указано в других ответах, это может быть достигнуто с помощью:

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

Вы также можете использовать 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 которые были установлены по-разному для элементов.

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop - то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background - тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций . В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() - отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

backdrop-filter

В первую очередь - это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение - это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub - прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

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

Header { background-color: rgba(255,255,255,.6); backdrop-filter: blur(5px) }
Каждый элемент за header`ом размыт на 5px. Это так просто.

filter()

Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:

Element { background: filter(url(path/to/img.jpg), blur(5px)); }
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она - вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

Несколько вещей, которые надо знать:

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Стоит отметить, что backdrop-filter и filter() можно легко анимировать с CSS transitions или анимацией, или с помощью JavaScript.

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Скачать файл-заготовку можно по .

Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут!!!

1. Фильтр размытие - blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость - brightness

Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% - оригинальным, а при 200% - станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

1. целые числа
2. дробные числа
3. проценты

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность - contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% - это значение по умолчанию. 0% - черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

Вот результат:

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность - saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение - 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность - opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

• проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия - invert

Он позволяет вам "переворачивать" цвета. На значения данного фильтра также вводятся ограничения:

• целые и дробные числа: от 0 до 1
• проценты: от 0% до 100

В нашем случае установим максимальное значение - 100 %:

И красивая спортивная машина лёгким движением руки превращается в...

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия - sepia

Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.

• целые и дробные числа: от 0 до 1
• проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение - 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого - grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

• целые и дробные числа: от 0 до 1
• проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 - к 100%.

Зададим значение - 0.7 (или 70%):

Проблема

В статье «Как сделать эффект лайтбокса » мы познакомились со способом отвлечения внимания от фрагментов веб-приложения посредством их затемнения с помощью полупрозрачной черной подложки. Но если страница содержит большое количество деталей, то затемнять ее приходится очень сильно, для того чтобы обеспечить достаточный контраст с отображающимся поверх текстом или привлечь внимание к световому коробу или другому элементу.

Более элегантный способ, заключается в том, что мы размываем все остальное, за исключением подсвеченного элемента, в дополнение к затемнению или вместо него. Кроме того, это создает более реалистичный эффект глубины, имитируя то, как наше зрение воспринимает объекты, находящиеся физически ближе к нам, когда мы на них фокусируемся. Однако реализовать этот эффект куда сложнее.

До появления спецификации Filter Effects это было вообще невозможно, и даже с использованием фильтра blur() задача остается непростой. К чему привязывать размывающий фильтр? Или мы должны применить его ко всему, за исключением определенного элемента? Если мы применим его к элементу , то будет размыто все содержимое страницы, включая элемент, к которому мы хотим привлечь внимание.

Ситуация очень похожа на ту, которую мы рассматривали в статье «Эффект матированного стекла» , однако прибегнуть к тому же решению здесь мы не можем, так как позади нашего диалоговогоокна может находиться все что угодно, а не только фоновое изображение. Что же делать?

Решение

К сожалению, для данного эффекта нам потребуется дополнительный элемент HTML: мы должны будем обернуть все содержимое нашей страницы, за исключением элементов, которые не должны размываться, в элемент-обертку, а затем применить размытие к нему.

Для этого идеально подойдет элемент

, так как он имеет двойное предназначение: отмечает собой основное содержимое страницы (диалоговые окна к основному содержимому обычно не относятся) и дает нам крючок, на который мы сможем навесить нужные стили. Разметка будет выглядеть приблизительно так:
HTML

Bacon Ipsum dolor sit amet…

O HAI, I’m a dialog. Click on me to dismiss.

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

каждый раз, когда диалоговое окно отображается на экране, одновременно применяя размывающую фильтрацию, вот так:

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 , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.