CSS3 背景剪辑

Question

我正在使用 -webkit-background-clip 将背景图像限制为 h2 元素中的文本。

我的问题是，-moz-background-clip 的功能是否相同？这似乎只适用于 webkit 浏览器，这表明它在 Firefox 中还不起作用:

#header h1 a{
    background: url(img/logo-overlay.png) no-repeat #000;
    -moz-background-clip: text; -webkit-background-clip: text;
    color: transparent; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent;
    text-decoration: none;
}

目前，在 Firefox 中，文本是隐藏的(因为 color: transparent 和 text-fill-color: transparent 属性)并且只有背景图像和颜色在元素的矩形形状中可见。

有什么想法吗？

Answer 1

我不认为 text 是 background-clip 属性的有效值。

MDC 声明了两种不同的声明，一种用于 Firefox 3.6 及以下版本，另一种用于即将推出的 Firefox 4。它还声明了 webkit 等效项。

Firefox (Gecko)     
1.0-3.6 (1.2-1.9.2)    -moz-background-clip:  padding | border
4.0 (2.0)              background-clip:     padding-box | border-box | content-box

Safari (WebKit)
3.0 (522)              -webkit-background-clip:  padding | border | content

请在此处查看 MDC 文档:https://developer.mozilla.org/en/CSS/background-clip

至于您要实现的目标，我相信 content-box 值就是您要寻找的。请注意，Firefox 3.6 及以下版本似乎不支持此值。

参见:http://www.css3.info/preview/background-origin-and-background-clip/