如何僅使用 HTML 和 CSS 輕鬆將圖片轉換為灰階？

將影像轉換為HTML/CSS 中的灰階：一個簡單的解決方案

在CSS 的幫助下可以以灰度顯示彩色點陣圖過濾器。這種方法提供了跨瀏覽器解決方案，並且實作起來相對簡單。

要使用 CSS 對圖片套用灰階效果，只需將以下程式碼新增至樣式表：

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

此程式碼會將頁面上的所有圖片轉換為灰階。或者，您可以定位特定影像：

#my-image {
  /* CSS styles */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

要停用懸停時的灰階效果，請加入以下程式碼：

#my-image:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

使用這個簡單的CSS 解決方案，您可輕鬆顯示影像灰度，無需SVG 或Canvas 等複雜技術。

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