首頁 >web前端 >css教學 >如何用CSS實現滑鼠懸停時的灰階圖轉換,同時確保相容IE和Firefox?

如何用CSS實現滑鼠懸停時的灰階圖轉換,同時確保相容IE和Firefox?

Barbara Streisand
Barbara Streisand原創
2024-10-26 13:42:32190瀏覽

How to achieve grayscale image transformation on mouse hover with CSS, ensuring compatibility with IE and 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn