Transparent text cut out of background

Question

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all pr

Answer 1

mix-blend-mode is also a possibility for that kind of effect .

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}

ABCDEFGHIJKLMNOPQRSTUVWXYZ