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

2023-02-11 0 ∞

В этом руководстве мы узнаем, как создать эффект размытого изображения с помощью фильтров 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;
    }
  }
}

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