How do I make punch-through transparent text in HT

问题:

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

回答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.

回答2:

You should just be able to do this

<div> 
    <h1>Title</h1>
</div>

Place the background-image on the div

The h1 will be transparent by default.

To center the title, use text-align:center

To center the background image, you can use background-position:center

Example: http://jsfiddle.net/jasongennaro/EQDZd/