html - HTML/CSS：“透视背景”文本？

Question

好的，这可能吗。

我有一张背景图片。最重要的是，我有一个用于内容的透明灰色框。我想在文本的顶部有标题，基本上是暴露背景的字母。因此，文本删除了灰色框并让背景显示出来。

我能看到的唯一 hacky 方法是创建一个在背景上具有相同灰色颜色的透明字母的图像，然后尝试以某种方式将其与灰色框对齐。

还有其他更好的方法吗？

Answer 1

一种方法是使用-webkit-background-clip: text;: demo here（显然只有 webkit）。

使用位置，我们可以同步两个背景：

#container, #container h1 {
    background: url(bg.png)
}

#container {
    position: relative;
}

#container #gray {
    background: rgba(0,0,0,.8);
    padding-top: 8em;
}

#container h1 {
    font-size: 8em;
    padding-top: /* padding + border of div */;
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}​

或者您可以使用相同的方法并应用svg mask，这将适用于所有现代浏览器。