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

Question

好的，这是否可能。

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

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

还有其他更好的方法吗？

- mtyson

---

可以尝试使用CSS 3的不透明度属性。http://www.w3schools.com/css/css_image_transparency.asp - Celeritas

为什么这是“hacky”？它只是一个带有透明度的图层。 - Jared Farrish

我能想到的唯一方法是仅限于使用WebKit。这样可以吗？ - Ry-

@Celeritas - 考虑避免在Stackoverflow上链接到w3schools；可以说这是一种“紧张”的关系。 链接到规范、像HTMLDog、Sitepoint这样的网站... 只是不要链接到w3schools（请参见http://w3fools.com）。 FYI - Jared Farrish

@JaredFarrish说：“-webkit-background-clip: text”与多个背景一起使用。也许吧，我还在琢磨:P （不过，如果背景是静态的，那就非常简单了。） - Ry-

Answer 1

一种方法是使用 -webkit-background-clip: text;：示例（仅适用于 Webkit 浏览器）。

通过使用 position，我们可以同步两个背景：

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

- jasssonpet

---

这在Chrome中实际上非常巧妙。 - Jared Farrish

这在Webkit中看起来很完美 - 你能详细说明一下如何在非Webkit中使用CVG吗？ - mtyson

@mtyson http://jsfiddle.net/NT7z7/12/ 你应该使用一些JS来生成SVG，以保持源代码的清洁。 - jasssonpet

background-clip: text 在FF49中也可用。如果设置了layout.css.prefixes.webkit为true（默认情况下从版本49开始），则-webkit-text-fill-color在FF49中也显然受支持。https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color - Maciej Krawczyk