问题 -moz-background-clip：文本在Firefox中不起作用

我试图通过图像填写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。没有其他浏览器。

我错过了什么吗？

请求帮助。

6702

2018-02-20 14:20

起源

以下 w3schools.com/cssref/css3_pr_background-clip.asp 'text'不支持'background-clip'的值。你在哪里找到'background-clip：text'连接？ - MarcinJuraszek

@MarcinJuraszek在这里： webkit.org/blog/164/background-clip-text - Stefan Paul Noack

-webkit-background-clip:text 存在，但是 -moz-background-clip:text 才不是;看到 developer.mozilla.org/en/CSS/-moz-background-clip - Paul D. Waite

答案:

同时 -webkit-background-clip:text 存在， -moz-background-clip:text 才不是，因此您将无法在Firefox中实现剪辑效果。（除非有另一种我无法想到的方式。）

也没有 -moz-text-fill-color，虽然你可以使用 color:transparent，只要该元素没有任何其他东西（例如边界， -wekbit-text-stroke）你想要可见。

你的代码不在Chrome和Safari中工作：

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

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

2018-02-20 14:57

Paul是对的，而且Fiddle显示OP的标记在Chrome中正常运行。 - Ryan

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

2018-02-21 03:08

您正在将样式应用于封闭 div不是 h1 标签。尝试更改您的选择器 .image_clip h1 {your:styles;}或者你可以保持你的CSS相同，并将类应用于 h1 同 <h1 class="image_clip"></h1>。

2018-02-20 14:35

要获得背景剪辑：文本以在Firefox中提供预期的外观，您可以使用此polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - 用非Webkit浏览器中的SVG版本替换CSS。 [未经测试但见过工作]

2018-05-12 21:30

问题 -moz-background-clip：文本在Firefox中不起作用

答案:

热门问题