CSS3 背景剪辑答案

【问题标题】：CSS3 background-clipCSS3 背景剪辑
【发布时间】：2011-04-05 18:28:25
【问题描述】：

我正在使用 -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 属性），只有背景图片和颜色在元素的矩形形状中可见。

有什么想法吗？

【问题讨论】：

标签： css

【解决方案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/

【讨论】：

有趣。 Webkit 浏览器中的“文本”值能够实现这一点（放大）：cl.ly/2Ame。那么，它现在必须完全是 Webkit 专有的。使用内容框不起作用 - 呈现与完全省略背景剪辑完全相同的结果。那应该表现得不同吗？感谢您的回复。

【解决方案2】：

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

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

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

【讨论】：