图像灰度与CSS&鼠标悬停重新着色？

本文介绍了图像灰度与CSS&amp;鼠标悬停重新着色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想要一个图标，它是彩色的（并将是一个链接），并把它的灰度，直到用户将他们的鼠标放在图标（在那里它会着色图像）。I am looking to take an icon that is colored (and will be a link) and turn it greyscale until the user places their mouse over the icon (where it would then color the image).这是可能的，在某种意义上是IE& Firefox支持？Is this possible to do, and in a way that is IE & Firefox supported?推荐答案有很多方法可以实现这一点：There are numerous methods of accomplishing this: 1。）CSS-仅使用一种彩色图片 img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */}img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%);} 演示 和 源 Demo and Source 2。）CSS-仅使用两组图像（灰度和彩色） > 2.) CSS-Only, using two sets of Images (Grayscale and Colored)您需要两个副本的图像，一个在灰度和另一个全彩色，然后使用CSS，你可以简单地应用悬停样式使用你的彩色图像。You would need two copies of the image, one in grayscale and the other in full color, and then using CSS, you could simply apply a hover style to use your colored image.#yourimage { background: url(../YourBlackAndWhiteImage.png);}#yourImage:hover { background: url(../YourColoredImage.png};} 工作演示 Working Demo这也可以使用jQuery hover（）方法。this could also be accomplished using the jQuery hover() method. 3。）使用具体的库来完成此功能： 去饱和 库可以操纵图片，方便您在灰度版本和全色版本之间切换。The desaturate library manipulates images, allowing you to easily switch between a grayscale version and full-colored version. 这篇关于图像灰度与CSS&amp;鼠标悬停重新着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！