Transparent Text But Opaque Background In Css

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 :

Solution 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;
}
.overlayh1 {
  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%);
}

<divclass="overlay"><h1>Mix-Blending in CSS</h1></div>