-moz-background-clip：文本在Firefox中不起作用 [英] -moz-background-clip:text does not work in 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上尝试。没有其他浏览器。

我错过了什么吗？

要求帮助。

解决方案

当存在-webkit-background-clip：text 时， -moz-background-clip：text 不 ，所以你不能在Firefox中实现你的剪切效果。 （除非有另一种我不能想到的方式。）

-moz-text-fill-color ，虽然你可以使用 color：transparent ，只要元素没有任何你想要可见的东西（例如边框， -wekbit-text-stroke ）。 / p>

您的代码 可在Chrome和Safari中使用：

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

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

I'm trying to fill in the content of a text in a h1 tag by an image. Following my understanding ;-), I'm doing the following in the html:

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

And in the css file:

.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;
}

The fact is that it does not yield the expected result... that is the text with the image in it as color. The image is displayed on the entire background of the div and not only behind the text. The text itself is moreover still in black.

I'm trying that on Firefox. Don't have other browsers.

Did I missed something?

Tks for the help.

解决方案

Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)

Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.

Your code does work in Chrome and Safari:

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

However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.

这篇关于-moz-background-clip：文本在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！