我正在尝试通过图像填写h1标签中的文本内容.
按照我的理解;-),我在html中执行以下操作：
按照我的理解;-),我在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：文本存在,
-moz-background-clip:text does not,所以你将无法在Firefox中实现剪辑效果. (除非有另外一种我无法想象的方式)
尽管您也可以使用颜色：透明,但只要该元素没有任何您想要显示的内容(例如边框,-wekbit-text-stroke).
您的代码可以在Chrome和Safari中运行：
> http://jsfiddle.net/7T8am/2/
但是,< h1>的文本确实需要是透明的,因此,如果任何其他CSS代码为< h1>设置颜色,则需要覆盖它.
