使用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中文網其他相關文章!