CSS：模具效果

我想知道在纯css中是否可能有模具效果： 具有背景色和颜色“透明”的块，该颜色将显示父块的背景

例如，我有一个以渐变或图案为背景的父块，我想用黑色背景覆盖一个文本内容将离开的块，以查看父块的渐变

我还没有找到一种方法让它发挥作用，但也许有人有什么想法或建议

编辑

对不起，我说得不够准确

以下是所需结果的图片：

---

使用嵌入式字体的东西，例如可能接近您想要的字体。通过更改背景和文本颜色，您应该可以获得所需的内容

您可以使用CSS3

文本阴影

属性

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

看我的例子

有关该物业的详细信息

---

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

据我所知，你可以使用SVG来实现这一点，但它不会很简单

（和）可能是您需要的最接近的实现。问题是它在每个浏览器中的工作方式并不相同，尽管你可以尝试更深入的研究

---

Upd：Lea Verou在她的文章中提出了一个简单而优雅的解决方案：

也许你可以使用CSS3背景剪辑。这样写：

HTML

<p>T</p>

​

---

勾选此项

发布一张你心中所想的图片可能会有所帮助。你指的是CSS面具吗？像这样吗？根据你编辑的帖子，你能不能把“t”做成png，然后通过CSS设置不透明度？透明的东西不能只显示它所在元素的背景色？如果不依赖SVG，我认为这是不可能的。也许你对“模具效果”的想法和我对“模具字体”的想法是不同的。。！您可能需要使用

color:rgba（255255,0）的文本。非常有趣。非常感谢。但不幸的是，如果父块（主体）的背景图像与子块的背景重叠（），那么这只适用于webkit 2。如果有几个孩子，这会变得复杂：你可以给职位附件：固定到背景检查，但只针对Webkit…而且我在W3C没有找到关于未来标准的草案？？CSSTricks有一个很好的例子：
<p>T</p>

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