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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试通过图像在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中实现剪切效果。（除非有我无法想到的另一种方式。）

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

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

以上是 -moz-background-clip：text在Firefox中不起作用 的全部内容， 来源链接： utcz.com/qa/413272.html

回到顶部