如何使用 CSS 創建一個在滑鼠懸停時重新著色的灰階圖像？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-10-27 02:35:02

原創

1075 人瀏覽過

How can I create a grayscale image with CSS that re-colors on mouse-over?

使用CSS 實現影像灰階並在滑鼠懸停時重新著色

您可以使用CSS 實現影像灰階並在滑鼠上重新著色-使用多種方法。概述如下：

純CSS（使用單色影像）

使用CSS 濾鏡將影像轉換為灰階並消除滑鼠懸停效果：

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

img.grayscale:hover {
  filter: none;
}</code>

登入後複製

CSS 和JavaScript 的組合

建立灰階影像和彩色影像，並在滑鼠移入和滑鼠移出事件時切換它們的可見性：

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

登入後複製

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

登入後複製

使用SVG 濾鏡（僅限IE10）

利用帶有濾鏡的內聯SVG 來應用飽和度效果並在滑鼠懸停時更改它：

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#grayscale)" ... />
</svg></code>

登入後複製

透過調整saturate的值，可以控制灰階的高低。 IE10以上版本支援此方法。

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