Как добавить полупрозрачный фон позади текста, не меняя непрозрачность текста, с эффектом выреза [дубликат] ⇐ CSS

[Anonymous]

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

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

    :root {
--background: rgba(255, 255, 255, 0.1);
--backgroundblur: blur(3px);
}
.c1 {
display: flex;
width: 90vh;
height: 90vh;
box-sizing: border-box;
margin: auto;
position: relative;
}
.c1 img {
width: 98%;
height: 98%;
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 {
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);*/
}

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

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

В классе C2 я хочу, чтобы фон был полупрозрачным ( background: white; ), не затрагивая текст.

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