Как применить эффект размытия оттенка только внутри области заполнения текста? ⇐ CSS

[Anonymous]

Я хочу, чтобы область внутри текстовой заполнения показала размытую и тонированную версию фонового изображения и любые другие элементы, которые накладывают текст. Другими словами, текстовое заполнение должно действовать как окно, которое раскрывает размытую и тонированную версию всего, что за ним, включая фоновое изображение и любые перекрывающиеся элементы, в то время как остальная часть страницы остается резкой и ясной. Я использую фоновую зажима CSS: текст и прозрачный текст заполняют линейно-градиентом (красный, синий) в качестве фонового изображения текста. Тем не менее, я хочу применить свой эффект .tint-blur-background внутри текстового заполнения вместо линейного градиента. < /P>
. Замена текущего градиента заполнением с помощью эффекта Tint-Blur?

Код: Выделить всё

body {
height: 100vh;
background: url('https://picsum.photos/1200/800') no-repeat center center;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

h1 {
font-size: 10rem;
background-image: linear-gradient(red, blue);

/* Standard version */
background-clip: text;

/* WebKit fallback */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px black;
z-index: 1;
}

.rect {
width: 200px;
height: 200px;
z-index: 2;
}

.tint-blur-background {
background-color: rgba(11, 202, 190, 0.25);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.line {
position: absolute;
background-color: black;
transform-origin: center;
z-index: 0;
}

.line.vertical {
width: 50px;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}

.line.horizontal {
height: 50px;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}< /code>


Hello

Подробнее здесь: https://stackoverflow.com/questions/796 ... -fill-area