图像灰度CSS和重新上色鼠标hover？

我正在寻找一个带有颜色的图标（并将成为一个链接），并把它变成灰度，直到用户把鼠标放在图标上（在那里它会着色图像）。

这是可能的，并以一种IE和Firefox的支持？

Answer 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%); } 

 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+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); } svg { background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); } svg image { transition: all .6s ease; } svg image:hover { opacity: 0; } 

 <p>Firefox, Chrome, Safari, IE6-9</p> <img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400"> <p>IE10 with inline SVG</p> <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"> <defs> <filter id="filtersPicture"> <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> </filter> </defs> <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" /> </svg> 

Answer 2

在这里回答： 在HTML / CSS中将图像转换为灰度

你甚至不需要使用听起来像一个痛苦或图像操作库的两个图像，你可以做跨浏览器支持（当前版本），只使用CSS。 这是一个渐进的增强方法，只是回到旧版浏览器的颜色版本：

 img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ } img:hover { filter: none; -webkit-filter: none; } 

和像这样的filters.svg文件：

 <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> 

Answer 3

我使用http://www.diagnomics.com/上的以下代码;

从黑白平滑过渡到具有放大效果的颜色（比例）

  img.color_flip { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .5s ease-in-out; } img.color_flip:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.1); } 

Answer 4

这是一个演示。 即使在IE7中工作：

http://james.padolsey.com/demos/grayscale/

和

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

Answer 5

你可以使用一个精灵 ，这个精灵既有彩色的，也有单色的。