CSS：模板效果

Question

我想知道纯css是否有可能产生模板效果： 具有背景颜色的块，颜色“透明”，可以显示父块的背景。

例如，我有一个带有渐变或图案作为背景的父块，我想要覆盖一个带有黑色背景的块，文本内容会留下，看看父块的渐变

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

修改

对不起，我不够准确。

以下是所需结果的图片：

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/

Answer 2

使用嵌入字体的某些内容（例如http://www.google.com/webfonts/specimen/Allerta+Stencil）可能与您想要的内容接近。通过更改背景和文本颜色，您应该得到您想要的内容

Answer 3

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

这会将div的不透明度或你应用它的任何东西设置为其原始不透明度的40％（通常为100％，除非你将它应用于已经降低不透明度的.png或.gif图像）

Answer 4

据我所知，您可以使用SVG，但这不会是微不足道的。

This（和this）可能是您需要的最接近的实施方式。问题是它在每个浏览器中都不起作用，尽管你可能会尝试更深入的研究。

更新：Lea Verou在她的文章中提出了一个简单而优雅的解决方案：Text masking — The standards way

Answer 5

您可以使用CSS3 text-shadow属性。

p{ text-shadow:0px 0px 2px #000 }

请参阅我的示例here。

有关属性here的详细信息。