如何僅使用 HTML 和 CSS 將彩色圖像轉換為灰階圖像？

使用HTML/CSS 將影像轉換為灰階

此問題旨在探索一種僅以灰階顯示彩色位元圖影像的輕鬆方法透過HTML 和CSS。目標是避免使用 SVG 或 Canvas 的複雜性，並找到相容於 Firefox 3 和 Safari 3 或更高版本的解決方案。

幸運的是，Webkit 中 CSS 過濾器的出現提供了跨瀏覽器的解決方案為了這個任務。以下程式碼片段說明如何實現所需的灰階效果：

<img src="image.png">

filter 屬性受Internet Explorer 6-9 和Microsoft Edge 支持，而-webkit-filter 屬性受Google Chrome 支持， Safari 6 和Opera 15 .

要停用懸停時的灰階效果，可以使用下列CSS規則應用：

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

這個簡單的解決方案允許將彩色影像轉換為 HTML/CSS 中的灰階影像，而不需要額外的 SVG 或 Canvas 開銷。

以上是如何僅使用 HTML 和 CSS 將彩色圖像轉換為灰階圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！