CSS : stencil effect

Question

我想知道在纯css中是否可以有模板效果:具有背景颜色和“透明”颜色的 block ，会显示父 block 的背景。

例如，我有一个以渐变或图案作为背景的父 block ，我想覆盖一个黑色背景的 block ，文本内容将离开该 block 看到父 block 的渐变.

我还没有找到让这个工作的方法，但也许有人有想法或提示？

编辑

对不起，我不够精确。

这是期望结果的图片:

Answer 1

或许您可以使用 CSS3 background-clip。像这样写:

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); 
}

检查这个http://jsfiddle.net/rD6wq/6/