HTML/CSS:"透过背景"文字？

Question

好的,这可能吗？

我有一个背景图片.最重要的是,我有一个透明的灰色框内容.我希望在文本的顶部有标题,这基本上是暴露背景的字母.因此,文本删除灰色框并让背景显示.

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

还有另一种 - 更好的方式吗？

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掩码,这将适用于所有现代浏览器.