Как сделать размытие css
Перейти к содержимому

Как сделать размытие 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; >>

Устанавливаем 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 »

Как размыть фоновую картинку?

За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter . Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter . При этом псевдоэлемент требуется зафиксировать чтобы он не прокручивался вместе с текстом. Для этого воспользуемся свойством position со значением fixed и здесь же зададим размеры псевдоэлемента через свойства top , left , bottom , right с нулевыми значениями.

Содержимое ::before оказывается выше текста и скрывает его, так что опускаем фон ниже свойством z-index со значением -1. В итоге получится код, показанный в примере 1.

Пример 1. Размытие фона веб-страницы

Результат данного примера показан на рис. 1.

Размытый фон

Рис. 1. Размытый фон у веб-страницы

Пример 2. Размытие фона раздела

Результат данного примера показан на рис. 2.

Размытый фон у блока

Рис. 2. Размытый фон у блока

См. также

  • backdrop-filter
  • background
  • filter
  • position
  • position в CSS
  • relative и absolute
  • Абсолютное позиционирование
  • Абсолютное позиционирование и гриды
  • Декоративные заголовки
  • Добавление тени
  • Использование в вёрстке
  • Линейный градиент
  • Липкое позиционирование
  • Не только текст
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Относительное позиционирование
  • Подробнее о позиционировании
  • Поток
  • Псевдоэлемент ::before
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Свойства позиционирования
  • Спойлер
  • Спрайты
  • Установка фона и градиента
  • Фиксированное позиционирование
  • Фильтр
  • Фоновая картинка
  • Функция blur()
  • Функция brightness()
  • Функция contrast()
  • Функция drop-shadow()
  • Функция grayscale()
  • Функция hue-rotate()
  • Функция invert()
  • Функция opacity()
  • Функция saturate()
  • Функция sepia()
  • Что это такое?

Размытый фон на CSS и другие backdrop-filter

Дизайнеры любят размытый фон. И дело легко решалось бы вставкой сразу размытой картинки. Но не тут-то было. Картинка должна меняться или при наведении переставать быть размытой. Грузить 2 картинки это слишком жестоко. Так нам приходилось поступать раньше. Но теперь можно сделать всё хорошо всего одной строчкой в CSS

backdrop-filter: blur(5px);

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

Зададим фоновую картинку для body или для любого блока. Поверх сделаем другой блок, например, с классом .text , пропишем ему размеры так, чтобы он занимал только какую-то часть блока, чтобы было видно каким был изначальный фон и что произошло потом. Чтобы увидеть размытие, верхнему блоку нужно задать фоновый цвет в формате, поддерживающем альфа-канал. Я возьму полупрозрачный белый в таком виде: background: #fff5; .

И теперь осталось добавить волшебное свойство backdrop-filter со значением blur(10px) . Чем больше число, тем сильнее степень размытия.

Другие функции backdrop-filter

Кроме размытия у свойства backdrop-filter есть и другие возможности:

/* фильтр URL в SVG */ backdrop-filter: url(common-filters.svg#filter); /* значения функции фильтра */ backdrop-filter: blur(2px); /* размытие*/ backdrop-filter: brightness(60%); /* яркость */ backdrop-filter: contrast(40%); /* контраст */ backdrop-filter: drop-shadow(4px 4px 10px blue); /* тень, но в отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом. */ backdrop-filter: grayscale(30%); /* тона серого */ backdrop-filter: hue-rotate(120deg); /* поворот цвета */ backdrop-filter: invert(70%); /* инверсия */ backdrop-filter: opacity(20%); /* прозрачность */ backdrop-filter: sepia(90%); /* сепия (эффект старинных фотографий) */ backdrop-filter: saturate(80%); /* насыщенность */

К элементу можно применить одновременно несколько функций

backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
  • Предыдущий: Как обрезать текст многоточием
  • Следующий: Доступное скрытие: паттерн .visually-hidden

Как заблюрить фон css

Чтобы заблюрить фон с помощью CSS, вы можете использовать свойство backdrop-filter . Это свойство позволяет добавлять размытие к заднему плану элемента, на котором оно применяется.

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

div  backdrop-filter: blur(5px); > 

Здесь мы применяем размытие к заднему плану элемента div с помощью свойства backdrop-filter и устанавливаем радиус размытия в 5 пикселей с помощью функции blur() .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *