图像灰度与CSS&鼠标悬停重新着色？ [英] Image Greyscale with CSS & re-color on mouse-over?

问题描述

我想要一个图标，它是彩色的（并将是一个链接），并把它的灰度，直到用户将他们的鼠标放在图标（在那里它会着色图像）。

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 < a href =http://api.jquery.com/hover/> 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;鼠标悬停重新着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！