How do I make punch-through transparent text in HTML/CSS?

Question

I have a div which has css background: rgba(0, 0, 0, 0.85);. Centered in that div is the title of the page. I want to make the title see through (knockout, punch-through, however you want to call it. i.e. see past the div's background black to the background image of the page). The only method of doing that that I have come up with is using an image with the div's background and transparent text and seperate the header part into blocks.

///////////////////////////////////////////////
//  (empty)    //  TITLE IMAGE //   (empty)  //
///////////////////////////////////////////////

The problem is that I dont know how to create the empty divs such that the image will remain centered (the empty divs need to be there to add the black background). Is there a different way to either do the see through text that doesnt have this problem or a way to center the image div with the empty divs?

EDIT: For an example of the effect that I am trying to achieve, look here: http://www.showandtell-graphics.com/layer-knockout.html

Answer 1

you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.