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中，文本是隐藏的（因为颜色：透明和文本填充颜色：透明属性），只有背景图像和颜色在元素的矩形形状中可见。

有什么想法吗？

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/

Answer 2

text现在是background-clip的实验性API，可以在前景文本中绘制背景。

Firefox，Chrome和Safari支持非官方的-webkit-background-clip：文本（仅带前缀）

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

CSS3背景剪辑

2 个答案: