Замена backdrop-filter

Question

Нужно размыть только фон у блока. Я знаю, что для этого есть свойство 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>

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

Answer 1

Свойство 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>

БЛОГ НА HUSL

Замена backdrop-filter

Ответы (1 шт):