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

【问题标题】：Replace a text color by a background image on mouse over在鼠标悬停时用背景图像替换文本颜色
【发布时间】：2012-03-29 10:17:16
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css fonts

【解决方案1】：

真的没那么简单……

Safari 和 Chrome 提供了 -webkit-mask-image 属性，它可以完全满足您的要求，但除 Safari 和 Chrome 之外的任何网络浏览器都不支持...阅读它here。

但是，还有这个替代的“技巧”...

Pure CSS Text Gradient

我并不完全推荐它，但我想你不会真的出错，唯一的问题是当你有其他元素与文本在同一行时，因为这个渐变会削减直接浏览页面...如果这些都合适，编写 JavaScript 会相当容易，但其中的 CSS 文本背景图像本身就是个问题。

【讨论】：

【解决方案2】：

1) 使用 css3 -webkit-background-clip: text; - 但仅适用于 chrome 和 safari

 #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

【讨论】：

复制你的答案并放在那里不是考试。在您的回答中，您对使用 -webkit-mask-image 感到满意。那是错误的&我们必须使用背景剪辑来制作效果&还有“纯css渐变”用OP问题做什么这个标题。由于这些原因，我没有检查链接。请删除 -ev 标记。用户必须快速理解答案。
你也给了一个错误的网址。这是正确的 - trentwalton.com/2010/03/24/css3-background-clip-text