Эффект backdrop-filter не действует на текущий блок

Question

Есть несколько блоков, которые приняли эффект размытия. Задача заключается в том, чтобы отображать за этими блоками другие псевдо элементы.

.item{
  width: 100px;
  height: 50px;
  background: rgba(1,255,0,0.5);
  border: 1px solid #ccc;
  position: relative;
  backdrop-filter: blur(15px);
  /** z-index: -1; **/
  transform-style: preserve-3d;
}

.item:after{
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: -10px;
  background: red;
  /** z-index: -1; **/
  transform: translateZ(-1px);
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Результат: Родительские блоки не принимают спецэффект размытия на текущий блок, а на соседний блок действует.

Вопрос: Как на текущий блок принять спец эффект размытия, так, что бы за фоном отображался псевдо элемент?

Answer 1

Пока есть контекст наложения, создаваемый свойством filter и transform, поместить элемент под родителя не выйдет. Дочерние элементы в таком случае всегда "внутри родителя".

Можете сделать всю стилизацию другому дочернему элементу, чтобы у родителя не было этих свойств:

.item {
  width: 100px;
  height: 50px;
  position: relative;
}

.item .in {
  height: 100%;
  background: rgba(1,255,0,0.5);
  border: 1px solid #ccc;
  backdrop-filter: blur(15px);
}

.item:after{
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: -10px;
  background: red;
  z-index: -1;
}

<div class="items">
  <div class="item">
    <div class="in">1</div>
  </div>
  <div class="item">
    <div class="in">2</div>
  </div>
  <div class="item">
    <div class="in">3</div>
  </div>
  <div class="item">
    <div class="in">4</div>
  </div>
</div>

Только в таком случае уже отпадает необходимость делать отрицательный z-index, вместо этого можно поднять дочерний элемент над псевдо-элементом.

БЛОГ НА HUSL

Эффект backdrop-filter не действует на текущий блок

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