Как размыть картинку в css

Размытие отдельных областей изображения в CSS

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

Сделаем это!

Компонент, который мы создадим в этом руководстве, основан на фреймворке CodyHouse.

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

Создаем копию изображения с помощью псевдоэлемента ::before , примененного к элементу .team__caption :

.team--blurred-img < .team__caption < overflow: hidden; &::before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../assets/img/img-01.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); transform: scale(1.1); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Размытие фона CSS используется для создания эффекта глубины и акцентирования внимания на определенных элементах.

Устанавливаем background-position: center bottom ; и background-size: 100% auto; , чтобы копия изображения полностью перекрывала оригинал.

Используя идентификаторы, устанавливаем для каждого снимка разные background-image.

.team--blurred-img < // . #james < .team__caption::before < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before < background-image: url('../../assets/img/img-04.jpg'); >> >

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

После применения фильтра blur заметно, что края изображения стали полупрозрачны. Это можно исправить, создав дополнительную копию изображения с помощью псевдоэлемента ::after . А также увеличив размер псевдоэлемента ::before с помощью масштабирования через transform: scale.

.team--blurred-img < .team__caption < overflow: hidden; &::before, &::after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); >&::before < transform: scale(1.1); >> #james < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-04.jpg'); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Также можно настроить таргетинг на браузеры, которые поддерживают свойство backdrop-filter . Это позволит реализовать размытие всего одной строкой кода.

К сожалению, на данный момент это свойство поддерживается не всеми браузерами. Поэтому мы решили использовать оба варианта.

браузерами. Поэтому мы решили использовать оба варианта. @supports (backdrop-filter: blur(10px)) < .team--blurred-img .team__caption < backdrop-filter: blur(10px); &::before, &::after < display: none; >> >

Готово! Теперь можно размыть еще больше изображений!

Вадим Дворников автор-переводчик статьи « How to create clipped, blurred background images in CSS »

Размытие краев изображения или фонового изображения с помощью CSS

Я знаю, что есть множество новых фильтров CSS, и мне интересно, есть ли способ применить их к изображению или фоновому изображению. Все, что я прочитал, говорит о смягчении изображения с помощью теневой тени, однако тень для тени — это цвет, и я хочу размыть края изображений, чтобы я мог объединить их более легко, если они были рядом друг с другом. Сейчас похоже, что вы можете использовать только тень или применить размытие ко всему изображению (на основе того, что я прочитал). Ближайшим, с которым я могу придумать, является полупрозрачная тень коробок. вроде этого

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); -moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 

Startec 12 июль 2014, в 08:14

Поделиться

Дайте одну ссылку, которую вы хотите именно. и разработать скрипку с вашим изображением. Мы могли бы помочь вам достичь ваших требований.

saikiran.vsk 12 июль 2014, в 06:09

Размытие background

Хочу, чтобы фон страницы был размыт. Картинка задана как background-img. Как я понял, фильтры(filter css) можно накладывать только на картинки. ps. Не нашел нужного вопроса т.к. везде спрашивали про img тег.

Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 7 сен 2017 в 8:44
EpicLegend EpicLegend
55 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если применить blur к body , то размыто будет все содержимое страницы.

Чтобы этого избежать, можно вынести background в новый div с position:absolute , а весь остальной контент обернуть в другой div с position:relative и z-index выше, чем у блока с фоном:

.content < position: relative; z-index: 2; color: #fff; >.bg < position: absolute; z-index: 1; left: -10px; top: -10px; right: -10px; bottom: -10px; filter: blur(5px); background: url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/tropical_beach_paradise_5k_17484.jpg) no-repeat center; background-size: cover; >

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Размытие с использованием CSS

Как добиться такого эффекта для блока? Пробовал через св-ва filter: blur(); и opacity , но не получается.

Отслеживать
задан 7 июл 2019 в 20:21
1 1 1 бронзовый знак
Создай дополнительный слой с той же картинкой, вот его и заблюрь. И будет так как хочешь
7 июл 2019 в 20:45
@Air, выделенный слой — не картинка
7 июл 2019 в 21:03
я понял. Вот я и говорю, что в css это делается так.
7 июл 2019 в 21:09
@Air, а, хорошо. Спасибо Вам
7 июл 2019 в 21:13

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

* < margin: 0; padding: 0; box-sizing: border-box; >html, body < width: 100vw; height: 100vh; background-color: #272727; >.wrapper < position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; >.layer-one < position: relative; width: 100vw; height: 100vh; background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); background-repeat: no-repeat; background-size: auto; >.layer-two < position: absolute; top: 115px; left: 125px; width: 50vw; height: 50vh; background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); background-repeat: no-repeat; background-position: -125px -115px; background-size: auto; filter: blur(15px); >

Есть еще вариант backdrop-filter: blur(); , проще и удобнее, но не все браузеры поддерживают.

* < margin: 0; padding: 0; box-sizing: border-box; >html, body < width: 100vw; height: 100vh; background-color: #272727; >.wrapper < position: relative; width: 100vw; height: 100vh; background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); background-repeat: no-repeat; background-size: cover; >.blur-layer

Отслеживать
ответ дан 7 июл 2019 в 21:26
14.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак

• html
• css
• css3
• filter

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420