Как применить полупрозрачный фон позади текста, не влияя на непрозрачность текста (с помощью эффекта выреза) ⇐ CSS

[Anonymous]

Я пытаюсь создать визуальный эффект, при котором фон за текстовой меткой (случайное имя) будет полупрозрачным и размытым. Однако я хочу, чтобы размытие и прозрачность применялись только к фону, а не к текстовому содержимому. Существует ли чистый способ с помощью только CSS добиться такого размытия фона позади текста в стиле выреза, не влияя на четкость текста?

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

    :root {
--background: rgba(255, 255, 255, 0.1);
--backgroundblur: blur(3px);
}
html {
background-image: url("https://www.w3schools.com/css/paper.gif");
}
.c1 {
display: flex;
width: 90vh;
height: 90vh;
box-sizing: border-box;
margin: auto;
position: relative;
}
.c1 img {
width: 88%;
height: 88%;
box-sizing: border-box;
border-radius: 50%;
padding: 3px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: var(--background);
backdrop-filter: var(--backgroundblur);
-webkit-backdrop-filter: var(--backgroundblur);
}
.c2 {
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
position: relative;
-webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 69%, black 70%);
mask-image: radial-gradient(circle at center, transparent 0%, transparent 69%, black 70%);
}
.c2:before {
background: conic-gradient(#ff0000,#ffa500,#ffff00,#008000,#0000ff,#4b0082,#ee82ee,#ff0000);
content: '';
inset: -100vw;
position: absolute;
z-index: 1;
animation: c2_animation 3s infinite linear;
}
@keyframes c2_animation {
100% {
transform: rotate(360deg);
}
}
.c3 {
font-weight: bold;
padding: 0px 3px;
position: absolute;
bottom: 20%;
left: 50%;
transform: translate(-50%, -5%);
border-radius: 3px;
font-family: bnazanin, serif;
text-indent: 1px;
text-align: center;
z-index: 2;

mix-blend-mode: screen;
color: black;

background: white;
/*background: var(--background);
backdrop-filter: var(--backgroundblur);
-webkit-backdrop-filter: var(--backgroundblur);*/
}
.c3 span {
display: inline-block;
animation: c3_animation 6s 0s infinite normal cubic-bezier(0,0,1,1) running;
}
@keyframes c3_animation {
from {
transform: perspective(100vw) translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, -180deg) scale3d(1,1,1) skew(0deg, 0deg);
}
to {
transform: perspective(100vw) translate3d(0px, 0px, 0px) rotate3d(0, 1, 0, 180deg) scale3d(1,1,1) skew(0deg, 0deg);
}
}

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

[img]https://www.w3schools.com/tags/img_girl.jpg[/img]
text

Подробнее здесь: https://stackoverflow.com/questions/798 ... ng-text-op