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 does not，但您无法在Firefox中实现剪辑效果。（除非有另一种我无法想到的方式。）

-moz-text-fill-color也没有，尽管您可以只使用color:transparent，只要该元素没有您想要显示的任何其他内容（例如边框，-wekbit-text-stroke）。

您的代码在Chrome和Safari中运行：

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

4 个答案: