CSS : stencil effect

css, mask

Solution

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/

Problem

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:

Original source