我可以僅使用 HTML 和 CSS 將圖像轉換為灰階嗎？

使用HTML/CSS 將圖像轉換為灰度

問題：

有沒有一個簡單的方法只使用HTML/CSS 以灰階顯示彩色位圖的方法，不會產生SVG 或Canvas？

答案：

隨著 Webkit 中 CSS 過濾器的出現，跨瀏覽器解決方案應運而生。以下是啟用灰階轉換的程式碼：

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

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

為了說明這一點，這裡有一個範例HTML 程式碼：

<img  src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png" class="lazy" alt="我可以僅使用 HTML 和 CSS 將圖像轉換為灰階嗎？" >

將此技術套用於映像會將其轉換為灰度，提供簡單有效的單色影像顯示解決方案。

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