如何用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中文網其他相關文章！