HTML/CSS: "See Through Background" Text? [duplicate]

Question

Ok, is this possible.

I have a background image. On top of that, I have a transparent grey box for content. I'd like to have title at the top in text, that is basically the letters exposing the background. So, the text removes the grey box and lets the background show through.

The only hacky way I can see is create an image with the letters transparent on a background the same grey color, and then try to somehow align that with the grey box.

Is there another - better - way?

Answer 1

One way is to use -webkit-background-clip: text;: demo here (webkit only obviously).

Using position, we can sync both backgrounds:

#container, #container h1 {
    background: url(bg.png)
}

#container {
    position: relative;
}

#container #gray {
    background: rgba(0,0,0,.8);
    padding-top: 8em;
}

#container h1 {
    font-size: 8em;
    padding-top: /* padding + border of div */;
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}​

Or you could use the same approach and apply a svg mask, that will work in all modern browsers.