100% transparant text inside div with solid background

Question

How can you display a text 100% transparant inside a div with a solid background so that the background is visible inside the text?

So I have a background image on the body, a div with a solid background color and I want the text to be 100% trasparant so the background-image of the body is visible through the text.

I hope you know what I mean :D

If the text was 100% transparent you'd just see the background colour, are you asking how to cut the text out of the background, so you'd see through the gaps where the letters should be? — James Hunt, Sep 08 '15 at 14:51
i think you used a wrong wording but the function you should look at is either opactity or background:rbga() — keikoku92, Sep 08 '15 at 14:53

score 2 · Answer 1 · edited May 23 '17 at 11:52

Yes, it can be done with background-clip:text --- a css3 property. Also you need to add the background image for text. This will solve your issue, but may support for all the browsers.

h1 {
  font-family:'...';
  font-size:25px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background:url(url/image.jpg);
  background-position:bottom;
  background-size:cover;
}

Reference: https://scotch.io/tutorials/text-backgrounds-and-gradients-with-background-clip

Also, I have found a similar post in stackoverflow: Transparent text cut out of background

This is great: http://jsfiddle.net/JGPuZ/1/

100% transparant text inside div with solid background

1 Answers1