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

Question

我正在寻找一个带颜色的图标（并将成为链接），并将其设为灰度，直到用户将鼠标置于该图标上（然后该图标将对该图像进行着色）。

是否可以这样做，并且以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>

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

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

这种方法需要图像的两份副本：一份是灰度的，另一份是全彩色的。使用CSS:hoverpsuedoselector，您可以更新元素的背景以在两者之间切换：

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

  /* Optional for a gradual animation effect */

  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的功能）来实现。

考虑第三方图书馆

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