Remove background from text

Question

Hello

I was making a transparent title and I wanted inside the text to see the background but not the background of the box.

In other words, inside the letters you could see the background image but inside the text I don’t want that white color of the text background.

Here is my HTML, what I can do for the letter Fill is the background image and not the white box?

#geraltudo .conteudocapa h1 {
  font-size: 75px;
  font-family: 'Tw Cen MT Condensed extra bold', sans-serif;
  -webkit-text-stroke: 2px black;
  -webkit-text-fill-color: rgb(0, 0, 0, 0);
  text-transform: uppercase;
}

#geraltudo .conteudocapa {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgb(255, 255, 255, 0.7);
  padding: 20px;
  color: black;
  border-radius: 20px;
}

#geraltudo {
 background-image: url("/w3images/photographer.jpg");
  background-color: red;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<div id="geraltudo">
  <div class="conteudocapa">
    <h1>Voar sobre o Paiva</h1>
  </div>
</div>

In this case, through the html I put the background would have to be red but without putting the text Fill as red.

Answer 1

To make the effect lacked basically vc repeat the background in the text itself, placing a background-image in the h1. and Tb missed doing the clip of the text, the property is used for this -webkit-background-clip: text;

NOTE: In some images that have a very well defined figure like bg it may be that the "overlay" of the images of bg vs. text is not perfect...

#geraltudo .conteudocapa h1 {
  font-size: 75px;
  font-family: 'Tw Cen MT Condensed extra bold', sans-serif;
  -webkit-text-stroke: 2px black;
  -webkit-text-fill-color: rgb(0, 0, 0, 0);
  text-transform: uppercase;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-background-clip: text;
  background-image: url(https://unsplash.it/300/200);
}

#geraltudo .conteudocapa {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgb(255, 255, 255, 0.7);
  padding: 20px;
  color: black;
  border-radius: 20px;
}

#geraltudo {
  background-image: url(https://unsplash.it/300/200);

  background-color: red;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<div id="geraltudo">
  <div class="conteudocapa">
    <h1>Voar sobre o Paiva</h1>
  </div>
</div>