使用CSS 濾鏡將影像轉換為灰階
在Web 開發領域，將影像轉換為灰階可能會帶來挑戰。涉及 SVG 或 Canvas 的傳統方法可能非常耗時。然而，隨著 CSS 濾鏡的出現，一種更簡單、跨瀏覽器的解決方案出現了。
跨瀏覽器灰階過濾
CSS 濾鏡提供了一種便捷的修改方式元素的外觀，包括影像。 grayscale() 濾鏡可讓您將影像轉換為灰度，模仿刪除顏色資訊的效果。
要將灰階效果套用於影像，請使用下列CSS 屬性：
-webkit-filter: grayscale(1); filter: grayscale(1);
範例程式碼
考慮以下HTML程式碼：
<img src="image.jpg">
要以灰階顯示影像，請新增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中文網其他相關文章！
