CSS 將彩色圖片轉換成黑白圖片

CSS3 的灰階濾鏡
使用 CSS3 來稀釋一個圖片的顏色，再簡單不過了。我們可以把這個 CSS 語句寫成一個類，這樣遇到想要效果的圖片，直接加上個類就可以了。

代碼如下	複製代碼
img.desaturate { filter: grayscale(100%); }

當然，當前的瀏覽器在使用 CSS3 的時候，要加上他們自己的瀏覽器功能實驗性首碼，所以，我們首先要做的，就是寫上瀏覽器的首碼：

代碼如下	複製代碼
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }

想要用在某個圖片上很簡單，加上一個類：

代碼如下	複製代碼
<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>這就可以了。

增加一個 SVG 的濾鏡效果
這個功能目前只在 Chrome 18+ 有效，其他瀏覽器馬上就會增加支援。為了在 Firefox 4+ 中得到相同的效果，我們可以需要使用 SVG 濾鏡。我把建立了一個單獨的檔案 的 saturate.svg ，代碼如下：

代碼如下	複製代碼
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="greyscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/> </filter> </svg>

不要被這段 SVG 代碼嚇住了——雖然上面的矩陣數列有點複雜。這段代碼我推薦你直接複製粘貼成一個通用的“小檔案”。我會再寫一篇文章詳細介紹一下上面矩陣變化，在這裡不再贅述。

加上上面的 SVG 檔案引用，我們要插入 HTML 頁面的 CSS 代碼如下：

代碼如下	複製代碼
img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); }

為 IE 做相容
到現在我們的代碼可以相容未來的瀏覽器，和最新版的 Chrome 、 Firefox 4+。為了讓 IE 6-9 加入相容列表，我們需要使用微軟的笨拙但是有效 filter 濾鏡：

代碼如下

複製代碼

img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; } img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); }

不幸的是，Safari 和 Opera 仍然不支援，但是 Safari 5.2 ——很快就會發布——應該會支援 webkit CSS3 濾鏡功能，同時 Opera 對 CSS3 的支援正在不斷提升。