我正在尝试通过图像在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中实现剪切效果。(除非有我无法想到的另一种方式。)
-webkit-background-clip:text
-moz-background- clip:text
只要元素没有其他想要显示的内容(例如borders)-moz-text-fill-color,尽管您可以只使用,但它们都不起作用。color:transparent``-wekbit-text-stroke
-moz-text-fill-color
color:transparent``-wekbit-text-stroke
但是,<h1>的文本确实需要透明,因此,如果任何其他CSS代码为设置了颜色,则<h1>需要覆盖它。
<h1>