HTML / CSS：“通过背景看”文本？

好的,这是可能的.

我有一个背景图像.最重要的是,我有一个透明的灰色框内容.我想在文字顶部有标题,这基本上是暴露背景的字母.所以,文字会移除灰色框,让背景显示出来.

我唯一可以看到的奇怪的方式是创建一个图像,字母在背景上透明一样的灰色,然后尝试以某种方式与灰色框对齐.

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

解决方法

一种方法是使用-webkit-background-clip：text;： demo here(仅显示webkit).

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

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

#container {
    position: relative;
}

#container #gray {
    background: rgba(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,这将适用于所有现代浏览器.