Размытие отдельных областей изображения в 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;
}
}
}
Готово! Теперь можно размыть еще больше изображений!