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

使用CSS 和Amp 的圖像灰度；滑鼠懸停時重新著色

在這篇文章中，我們將探討如何實現此效果並提供跨瀏覽器兼容性。

純CSS（僅使用一張彩色影像）

對於第一種方法，我們使用純CSS 和僅一個影像：

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

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

使用SVG

此方法使用內聯SVG 來創建灰度效果和單獨的圖像顏色版本：

<code class="css">img.grayscale {
  -webkit-filter: grayscale(100%);
}</code>

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

最後，我們可以使用JavaScript 來更改懸停時的圖像來源：

<code class="css">img.grayscale {
  filter: grayscale(100%);
}</code>

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

這些方法提供跨瀏覽器相容性，並允許您輕鬆為影像添加灰階和懸停效果。

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