CSS教程：使用濾鏡將圖片變成黑白

在網頁設計中，為了增加頁面的美感和吸引力，經常會用到各種CSS樣式來處理圖片。其中，將彩色圖片轉換為黑白是一種常見的效果。本教程將介紹如何使用CSS濾鏡輕松實現這一效果。 新建文件首先，在你的項目目錄

在網頁設計中，為了增加頁面的美感和吸引力，經常會用到各種CSS樣式來處理圖片。其中，將彩色圖片轉換為黑白是一種常見的效果。本教程將介紹如何使用CSS濾鏡輕松實現這一效果。

新建文件

首先，在你的項目目錄下新建一個名為的HTML文件。在這個文件中，我們將實現將彩色圖片轉換為黑白的效果。

輸入HTML5結構代碼

在文件中輸入以下HTML5結構代碼，并將title標簽內容修改為“濾鏡將圖片變成黑白”以方便識別和管理。

```html

```

載入彩色圖片

接下來，使用img標簽在HTML文件中載入一張彩色圖片。你可以通過指定圖片的src屬性來加載需要處理的圖片。

```html

```

設置類名和應用濾鏡

繼續載入另一張彩色圖片，并為這兩張圖片設置一個相同的類名，以便統一處理。然后，使用CSS filter屬性來實現將彩色圖片變成黑白的效果。

```html

```

```css

.bw-image {

filter: grayscale(100%);

}

```

查看效果

最后，在瀏覽器中運行文件，你將會看到帶有類名“bw-image”的圖片已經成功轉換為黑白色，而沒有添加該類名的圖片仍然保持原來的彩色風格。

通過簡單的幾步操作，你可以輕松地利用CSS濾鏡效果將彩色圖片轉換為黑白，為你的網頁設計增添更多可能性和創意。試試這個方法，讓你的網頁與眾不同！