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属性，文本内容被隐藏，只有元素的矩形背景图片和颜色是可见的。

您有什么想法吗？

- Gavin

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/

- Yi Jiang

---

有趣。在Webkit浏览器中，'text'值能够实现这个效果(放大):http://cl.ly/2Ame。目前它必须完全是Webkit专有的。使用content-box没有用-渲染结果与完全省略background-clip相同。那应该是有不同的行为吗？谢谢您的回复。 - Gavin

Answer 2

text 是一个实验性 API，用于 background-clip，使背景被绘制在前景文本内。

Firefox、Chrome 和 Safari 支持非官方的 -webkit-background-clip: text（仅有前缀）。

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

- XY Li