我正在尝试通过图像填写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>设置颜色,则需要覆盖它.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。