Background-clip text from parent element - html

Question

I have a page with a full-screen background that has some blocks with a black background on it. I would like to achieve that the text in those black blocks looks like it's cut out from the black box so you can see the background image.
Below is a simplified version of the HTML and CSS set-up:
.background {
background-image: url(https://picsum.photos/200/300);
height: 100vh;
width: 100vw;
}
.blackbox {
background-color: black;
padding: 30px;
display: inline-block;
margin-top: 100px;
margin-left: 400px;
}
.text {
font-size: 40px;
font-weight: bold;
font-family: 'Helvetica', 'Arial', sans-serif;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: url(https://picsum.photos/200/300);
}
<div class="background">
<div class="blackbox">
<div class="text">TEXT</div>
</div>
</div>
If I move the background image to the child text element, the clipping works but it doesn't match with the background-image on the parent element. I thought this question had my answer but the child element doesn't have a background.

Answer 1

This should be responsive. mix-blend-mode is what you're looking for:
Source (https://www.w3schools.com/howto/howto_css_cutout_text.asp)
.background {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png);
background-size: cover;
position: relative;
height: 200px;
}
.text {
background-color: black;
color: white;
font-size: 5vw;
font-weight: bold;
margin: 0 auto;
padding: 0 15px 0 15px;
text-align: center;
position: absolute;
height: 200px;
line-height: 200px;
mix-blend-mode: multiply; /* This makes the cutout text possible */
}
<div class="background">
<div class="text">TEXT</div>
</div>