Question

我想知道是否可以用背景图片替换文本的颜色。我不认为只能使用CSS，但我正在寻找任何其他方法来做到这一点，而不使用文本的png图片。我们的想法是仅在字体上显示背景图像。

Answer 1

真的不那么容易......

Safari和Chrome 提供的属性-webkit-mask-image可以完全满足您的需求，但除Safari和Chrome之外的任何网络浏览器都不支持...阅读相关内容{{3} }。

然而，有这种替代“技巧”......

here

我并不完全推荐但是我猜你真的不会出错，唯一的问题是当你在文本的同一行上有其他元素时，因为这个渐变会切割直到页面...如果这些是合适的，编写JavaScript将相当容易，但CSS文本背景图像在其自身是非常问题。

Answer 2

1）使用css3 -webkit-background-clip：text; - 但仅适用于chrome＆amp;狩猎

 #p:hover{
   background:transparent url(http://www.astrosurf.com/~buil/iris/new540/gradient1.jpg);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
}

http://jsfiddle.net/KHECk/2/

2）使用绝对位置。它适用于所有浏览器。但必须检查您的要求。不适用于所有类型的图像。

http://jsfiddle.net/KHECk/9/

3）您也可以使用SVG来产生这种效果

http://www.boogdesign.com/examples/svg/pattern-fill.svg

在鼠标悬停时用背景图像替换文本颜色

2 个答案:

here