-moz-background-clip:文本在Firefox中不起作用

Question

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

我错过了什么吗？

请求帮助.

Answer 1

虽然-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>需要覆盖它.