-moz-background-clip：文本在 Firefox 中不起作用答案

【问题标题】：-moz-background-clip:text does not work in Firefox-moz-background-clip：文本在 Firefox 中不起作用
【发布时间】：2012-03-10 21:11:07
【问题描述】：

我正在尝试通过图像填充 h1 标记中的文本内容。根据我的理解;-)，我在 html 中执行以下操作：

<div class="image_clip">
 <h1>
  MY WONDERFULL TEXT
 </h1>
</div>

在css文件中：

.image_clip{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

事实是它没有产生预期的结果……那是带有图像的文本作为颜色。图像显示在 div 的整个背景上，而不仅仅是在文本后面。文本本身仍然是黑色的。

我正在 Firefox 上尝试。没有其他浏览器。

我错过了什么吗？

感谢您的帮助。

【问题讨论】：

以下w3schools.com/cssref/css3_pr_background-clip.asp 'text' 不支持作为'background-clip' 的值。您在哪里找到“背景剪辑：文本”连接？
@MarcinJuraszek 这里：webkit.org/blog/164/background-clip-text
-webkit-background-clip:text 存在，但-moz-background-clip:text 不存在；见developer.mozilla.org/en/CSS/-moz-background-clip

标签： html firefox css

【解决方案1】：

要让 background-clip:text 在 Firefox 中呈现预期的外观，您可以使用这个 polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - 在非 Webkit 浏览器中将 CSS 替换为 SVG 版本。 [未经测试，但可以正常工作]

【讨论】：

【解决方案2】：

根据标准，background-clip 属性（顺便说一下，在 Firefox 中实现时不带前缀）没有text 值。您使用的是专有的 WebKit 功能，而不是标准的 CSS 属性......

【讨论】：

【解决方案3】：

虽然-webkit-background-clip:text 存在，-moz-background-clip:text does not，所以你将无法在 Firefox 中实现剪辑效果。（除非我想不出其他方法。）

-moz-text-fill-color 也没有，尽管您可以只使用 color:transparent，只要该元素没有您想要显示的任何其他内容（例如边框、-wekbit-text-stroke）。

您的代码可以在 Chrome 和 Safari 中工作：

http://jsfiddle.net/7T8am/2/

但是，<h1> 的文本确实需要是透明的，所以如果有任何其他 CSS 代码为 <h1> 设置颜色，您需要覆盖它。

【讨论】：

Paul 是对的，Fiddle 显示 OP 的标记在 Chrome 中为我正常工作。

【解决方案4】：

您将样式应用于封闭的div，而不是h1 标记。尝试将您的选择器更改为 .image_clip h1 {your:styles;}，或者您可以保持 CSS 不变，并将类应用到 h1 和 <h1 class="image_clip"></h1>。

【讨论】：