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 mask，这将适用于所有现代浏览器。

HTML / CSS：“透过背景”文字？

1 个答案: