CSS : stencil effect

Question

I wonder if it is possible in pure css to have a stencil effect: A block with a background color, and color "transparent" that would reveal the background of the parent block.

For example, I have a parent block with a gradient or pattern as background, and I want to overlay a block with a black background where the text content would leave see the gradient of the parent block.

I haven't found a way to get this to work, but maybe someone has an idea or a tip?

EDIT

Sorry, I should not be precise enough.

Here is a picture of the desired result:

Answer 1

May be you can use CSS3 background-clip. write like this:

HTML

<p>T</p>

CSS

p{
    font-size:50px;
    font-family:impact;
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
    -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
position:relative;    
    width:80px;
    height:80px;
    text-align:center;
    padding-top:10px;
}
p:after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.8);
    width:80px;
    height:80px;
    border-radius:100%;
    top:0;
    left:0;
    z-index:-1;
}
body{
    background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg); 
}

​

Check this http://jsfiddle.net/rD6wq/6/

Answer 2

Something using an embedded font, such as http://www.google.com/webfonts/specimen/Allerta+Stencil may be close to what you want. By changing the background and text colours, you should get what you are looking for

Answer 3

#element_id {
    opacity:0.4;
    filter:alpha(opacity=40);
}

this will set the opacity of the div or whatever you apply it too 40% of its original opacity (which is usually 100% unless you apply this to .png or .gif images with reduced opacity already)

Answer 4

As far as I know, you can use SVG for that, but it won't be trivial.

This (and this) might be the closest implementation of what you need. The problem is that it doesn't work the same in every browser, though you may try deeper research.

Upd: Lea Verou has presented a simple and elegant solution in her article: Text masking — The standards way