如何使用 CSS 濾鏡輕鬆將影像轉換為灰階？

使用CSS 濾鏡將影像轉換為灰階

在Web 開發領域，將影像轉換為灰階可能會帶來挑戰。涉及 SVG 或 Canvas 的傳統方法可能非常耗時。然而，隨著 CSS 濾鏡的出現，一種更簡單、跨瀏覽器的解決方案出現了。

跨瀏覽器灰階過濾

CSS 濾鏡提供了一種便捷的修改方式元素的外觀，包括影像。 grayscale() 濾鏡可讓您將影像轉換為灰度，模仿刪除顏色資訊的效果。

要將灰階效果套用於影像，請使用下列CSS 屬性：

-webkit-filter: grayscale(1);
filter: grayscale(1);

範例程式碼

考慮以下HTML程式碼：

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何使用 CSS 濾鏡輕鬆將影像轉換為灰階？" >

要以灰階顯示影像，請新增CSS樣式：

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Hover Override

停用灰階效果停留時，您可以指定不同的濾鏡值：

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

這將恢復影像當滑鼠懸停在其上時，將變為原始顏色。

瀏覽器相容性

現代瀏覽器支援 CSS 過濾器，包括 Webkit、Edge 和 Firefox 35 。但對 IE6-9 的支持有限。

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