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

在HTML/CSS 中以最小的努力將影像轉換為灰階

在Web 開發領域，以灰階顯示影像有時可能是一種必需品。傳統上，此類轉換涉及 SVG 或 Canvas 等複雜方法。然而，隨著 CSS 濾鏡的出現，我們現在有了更簡單的解決方案。

要使用HTML/CSS 將圖像轉換為灰度，請按照以下步驟操作：

1. 應用CSS 過濾器： CSS 過濾器提供了一種調整影像外觀的簡單方法。將以下程式碼加入樣式表：

 -webkit-filter:grayscale(1); /<em> Chrome、Safari、Opera </em>/<br> 過濾器：灰階(1); /<em> Edge、Firefox </em>/<br>}

2. 包含影像： 一旦CSS就位後，使用HTML來顯示你想要的image :

<p>此解決方案利用灰階濾鏡將影像無縫轉換為單色，無需額外的腳本或複雜的程式碼。它與 Chrome、Edge、Firefox、Safari 和 Opera 等現代瀏覽器相容。 </p>

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