一尘不染

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

css

我正在尝试通过图像在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上尝试。没有其他浏览器。

我错过了什么吗?

谢谢你的帮助。


阅读 487

收藏
2020-05-16

共1个答案

一尘不染

虽然-webkit-background-clip:text存在,-moz-background- clip:text但不存在,因此您将无法在Firefox中实现剪切效果。(除非有我无法想到的另一种方式。)

只要元素没有其他想要显示的内容(例如borders)-moz-text-fill-color,尽管您可以只使用,但它们都不起作用。color:transparent``-wekbit-text-stroke

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

2020-05-16