transparent text but opaque background in css [duplicate] - html

Question

This question already has answers here:
How to make "see through" text?
(2 answers)
Closed 5 years ago.
.parent-div {
background-image: url(path\to\image);
background-size: cover;
}
.text-div {
/* make text transparent but not this background */
background-color: orange;
}
<div class="parent-div">
<div class="text-div">Welcome!</div>
</div>
I want to make the text of text-div to be transparent so that I can see background of parent-div. and remaining part of text-div must be opaque.
Basically I want this effect :

Answer 1

I found an answer for my question here:
https://codepen.io/zFunx/pen/EbOQow
body {
padding: 0;
margin: 0;
height: 100%;
}
.overlay {
background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
height: 100%;
position: relative;
background-size: cover;
}
.overlay h1 {
position: absolute;
background-color: #000;
color: #fff;
mix-blend-mode: multiply;
text-align: center;
font-size: 3em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="overlay">
<h1>Mix-Blending in CSS</h1>
</div>