Как сделать текст прозрачным, но при этом размывающим задний фон?

Question

Я пытаюсь сделать текст, который будет прозрачным, но при этом, будет размывать задний фон. Т.е., я хочу, чтобы надпись "pipl" еще больше размывала задний фон картинки.

Я очень долго мучился с backdrop-filter, пробуя разные варианты. Но, пока ничего не вышло из этого, кроме размытия фона самого div-a.

У вас есть предположения, как это можно сделать?

.pipl-l {
  display: flex;
  justify-content: center;
  margin-top: 0%;
  font-size: 25vh;
  backdrop-filter: blur(4px);
}

<div class="container pipl-l">
  pipl
</div>

Answer 1

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

Следует более ответственно подойти к выбору фона - он должен содержать, как можно больше мелких деталей, и быть изначально не "замыленным". Также не сто́ит перебарщивать со степенью размытия, иначе полученный результат не будет соответствовать ожиданиям.

Разверните пример на всю страницу и попробуйте изменить размер блока, ухватив изображение за правый нижний угол или просто измените размер окна:

body { margin: 0; height: 100vh; }

.wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font: bold 33vh sans-serif;
  resize: both; overflow: hidden; /* Для интерактивного изменения размера. Необязательно */
  background: 
    0% 0% / auto no-repeat url("https://i.stack.imgur.com/m9NKc.png"), /* Сетка */
    center / auto no-repeat url("https://i.stack.imgur.com/m9kuJ.jpg"); /* Фон */
}

.label {
  box-shadow: 1px 1px 2px #0008, inset 1px 1px 2px #fff8; /* Границы подложки. Необязательно */
  backdrop-filter: blur(1px); /* Размытие подложки */
}

.text-fake { color: transparent; }

.text-blur {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; width: 100%;
  background: inherit;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  filter: blur(3px); /* Размытие текста */
}

<div class="wrapper">
  <div class="label">
    <div class="text-fake">BLUR</div>
  </div>
  <div class="text-blur">BLUR</div>
</div>

БЛОГ НА HUSL

Как сделать текст прозрачным, но при этом размывающим задний фон?

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