带有CSS的图像灰度和鼠标悬停时重新着色？

带有CSS的图像灰度和鼠标悬停时重新着色？

有多种方法可以完成此 *** 作，下面将通过一些示例详细说明。

纯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");   filter: gray;   -webkit-filter: grayscale(100%); }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");    filter: gray;    -webkit-filter: grayscale(100%);    -webkit-transition: all .6s ease;    -webkit-backface-visibility: hidden;  }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  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>

您可以在此处找到与此技术相关的文章。

纯CSS（使用灰度和彩色图像）

这种方法需要图像的两份副本：一份是灰度的，另一份是全彩色的。使用CSS

:hover

psuedoselector，您可以更新元素的背景以在两者之间切换：

#yourimage {     background: url(../grayscale-image.png);}#yourImage:hover {     background: url(../color-image.png};}#google {  background: url('http://www.google.com/logos/keystroke10-hp.png');  height: 95px;  width: 275px;  display: block;    transition: 0.5s;}#google:hover {  background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');}<a id='google' href='http://www.google.com'></a>

这也可以通过以

hover()

相同方式使用基于Java的悬停效果（例如jQuery的功能）来实现。

考虑第三方图书馆

在去色库是一个公共库，可以让您轻松定元素或图像的灰度版本和全彩色版本之间切换。