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

Replace a text color by a background image on mouse over

本文关键字：图像 替换 文本 颜色 背景 鼠标 悬停      更新时间：2023-09-26

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

这真的没那么容易。。。

Safari和Chrome提供属性-webkit-mask-image，它完全可以满足您的需求，但除Safari和Chrome外，任何网络浏览器都不支持它。。。请在这里阅读。

然而，还有另一个"窍门"

纯CSS文本渐变

我并不完全推荐，但我想你不会真的出错，唯一的问题是当你在文本的同一行上有其他元素时，因为这种梯度会直接穿过页面。。。如果这些都合适，编写JavaScript将相当容易，但CSS文本背景图像本身就是个问题。

1）使用css3-webkit背景剪辑：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

相关文章：