1

Нужно размыть только фон у блока. Я знаю, что для этого есть свойство backdrop-filter, но оно плохо поддерживается (в частности firefox).

введите сюда описание изображения

.block {
  filter: brightness(0.4);
  background-size: cover;
  background-image: url(https://picsum.photos/100);
  background-repeat: no-repeat;
  background-position: center center;
  width: 200px;
  height: 200px;
  color: white
}
<div class="block">adadwd</div>

Как можно размыть только фон у блока в данном примере?

3
  • Всё очень просто. Firefox не браузер давно. На сайте разрешаем нужные user-agent и проблема решена. После подмены типа браузера пользователем это уже его проблемы будут, если что-то не правильно отображается
    – Doofy
    18 янв 2021 в 21:22
  • Всегда так делал. Firefox много чего не поддерживает. Если кто-то заходит с недобраузера, то перенаправляем пользователя скачать нормальный браузр. (шёпотом главное не яндекс)
    – Doofy
    18 янв 2021 в 21:23
  • Нормальный такой бред
    – Doofy
    19 янв 2021 в 7:15

1 ответ 1

3

Свойство backdrop-filter: blur(5px) размывает область под элементом (другие элементы под ним), а не фон внутри элемента.

Для размытия элемента есть свойство filter: blur(5px). Чтобы размыть только фон, можно сделать фон отдельным элементом или псевдо-элементом, применить к нему данный фильтр размытия. Чтобы края остались чёткими, нужно сделать этот элемент больше родителя на размер размытия (на практике чуть больше нужно). А у родителя сделать обрезку через overflow: hidden.

.block {
  background-size: cover;
  width: 200px;
  height: 200px;
  color: white;
  position: relative;
  overflow: hidden;
}

.block::after {
  content: "";
  background: url(https://picsum.photos/100) no-repeat center center;
  background-size: cover;
  filter: blur(10px) brightness(0.4);
  position: absolute;
  left: -10px;
  top: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
}
<div class="block">adadwd</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.