如何用CSS实现鼠标悬停时的灰度图转换，同时保证兼容IE和Firefox？

使用 CSS 对鼠标悬停时的图像进行灰度化和重新着色

挑战：将彩色图标转换为灰度并恢复当鼠标悬停在其上时，它会变色，确保与 IE 和 Firefox 兼容。

解决方案：

1.纯CSS（使用单色图像）：

这种方法利用CSS过滤器将图像转换为灰度。 filter 属性应用于灰度级的 img 元素。

CSS:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,"); /* Firefox 3.5+, IE10 */
  filter: gray;                           /* IE6-9 */
  -webkit-filter: grayscale(100%);      /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

2. CSS 和 SVG（带内联 SVG）：

IE10 支持内联 SVG，从而提供更简洁的解决方案。 SVG 图像使用 feColorMatrix 元素进行过滤，并通过将饱和度值设置为 0 来应用灰度效果。

HTML:

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" 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(#filtersPicture)" x="0" y="0" width="400" height="377" xlink:href="image.jpg" />
</svg></code>

以上是如何用CSS实现鼠标悬停时的灰度图转换，同时保证兼容IE和Firefox？的详细内容。更多信息请关注PHP中文网其他相关文章！