如何使用 CSS 創建在滑鼠懸停時重新著色的灰階圖像？

CSS 灰階與滑鼠懸停重新著色

查詢：

建立一個原本是灰階的影像，但切換到當滑鼠懸停在其上時的顏色。使用 IE 和 Firefox 相容的 CSS 技術來實現此操作。

解決方案：

純CSS（使用單色影像）：

此方法利用CSS 濾鏡實現灰階效果並在懸停時刪除濾鏡以顯示原始顏色：

<code class="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+ &amp; Safari 6+ */
}

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

帶有CSS 轉換的內聯SVG：

此方法將SVG 元素嵌入圖像並應用CSS懸停時在灰階和顏色之間淡入淡出的過渡：

<code class="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");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden;
}

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

svg {
  background: url(https://image-source.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

以上是如何使用 CSS 創建在滑鼠懸停時重新著色的灰階圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！