想要在網頁上呈現黑白(灰階)圖片效果，最簡單的方法就是利用影像軟體後製，操作熟練的話很快就能完成。不過，若是網頁有很多圖片、或是不定時需要灰階效果的話怎麼辦？重新上傳也是麻煩，這時如果能透過語法，只針對需要灰階的圖片進行處理，算是最方便的解決辦法。CSS3 / HTML5 語法都可以做到這種特效，但可惜的是，不是每種瀏覽器版本都支援，要做到跨瀏覽器相容是一件痛苦的事，可參考這篇「使用CSS將圖片轉換成黑白」就能知道原因。目前比較完美的方法，就是安裝 js 外掛，利用程式運算來解決了。
而本文 WFU 要分享的技巧，不須靠後製、也不需要研究任何語法，只要使用 PICASA(Google+相簿) 的圖床，在圖片網址加上一些參數，就能變成黑白圖片。以下就來看看這個魔法，以及各種應用方式吧！
一、PICASA 圖片網址原理
PICASA 圖片網址的基本參數原理，可參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」，利用改變參數的數字大小，就能改變圖片的尺寸。
不過除了圖片尺寸，PICASA 還能藉由改變參數來達到一些特效，則是從 +綜合口味 發表的這個「Blogger社群討論串」得知，加上一長串複雜的參數後，可以達到毛玻璃的效果。
例如上圖的網址為："http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg"
插入這行參數後："-fcrop64=1,000007b9ffffd845:Soften=1,60,0"
圖片網址成為："http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,000007b9ffffd845:Soften=1,60,0/wfublog.jpg"
效果就像下面這張糊掉了的圖片：
因此，關鍵在於調整 "fcrop64" 及 "Soften" 的參數。而找到其他特效參數的話，也能如法炮製，做出比美後製軟體的特效。，本文首先要介紹的是，算是滿實用的 "灰階" 特效。
二、灰階特效參數
1. 簡化參數
原本的字串 "fcrop64" 參數過長，且會裁切圖片。經測試後，參數可簡化為 "1,ffffffaa"，並可維持原圖尺寸。
2. 灰階字串參數
最後找到的關鍵字串及參數為 "ansel=1,ffffff"，後面的 "ffffff" 是色碼。
3. 不同色系的灰階消果
如果使用了 "ffffff" 參數，代表為一般的 "黑白" 效果，如果使用了不同的色碼代號，就能呈現各種灰階效果，以下使用三原色的色碼舉例(查詢色碼請參考「網頁色碼選擇器」)──
紅色：上圖使用色碼 "FF0000"，圖片網址參數為──
- http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FF0000/wfublog.jpg
黃色：上圖使用色碼 "FFFF00"，圖片網址參數為──
- http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFF00/wfublog.jpg
藍色：上圖使用色碼 "0000FF"，圖片網址參數為──
- http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,0000FF/wfublog.jpg
相信以上三種灰階效果，肉眼是可以分辨地出來。若真的看不出來(螢幕跟 WFU 一樣爛的話)，可點擊這三張圖片另開分頁，在不同分頁間切換即可看出差別。而想顯示不同的灰階，只要置換其他不同的色碼即可。
三、Hover 效果應用
瞭解 PICASA 圖片灰階效果的參數如何使用後，接下來介紹一個簡單的 Hover 效果，將原本的圖片設定成黑白，滑鼠經過時顯示原圖，只要利用簡短的語法就能完成。
<img src="http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg" onmouseover="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg'" onmouseout="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg'"/>- 以上程式碼的意思為，一開始圖片網址設定為黑白效果，使用了綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。
- 滑鼠經過時(onmouseover)，圖片網址改為原圖網址(沒有多餘參數)。
- 滑鼠離開時(onmouseout)，圖片網址改為黑白效果，使用綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。
想要測試效果，可以將滑鼠移到下面這張圖：
四、整個區塊的圖片變成黑白
這應該是更為實用的應用了，通常這樣的效果需要加裝外掛才能實現，現在只要在範本中加入幾行語法就能實現了。不過，或許以下內容至少需要基礎的 HTML 概念才能理解。
1. 添加 class 名稱
首先在想要實現灰階圖片的所有區塊，全部加上 class 名稱，就像 <div class="picasa-grayscale"> 這樣。(藍色字串名稱 "picasa-grayscale" 可自訂)
例如想把 Blogger 文章區塊的圖片都變成黑白，可在範本中搜尋 <div class='blog-posts...> 這樣的字串(有多處，每一處都要改)，由於這個區塊已經設定了 class 屬性，那麼就在 class 的內容新增一個字串名稱，彼此用空白隔開，就像 <div class='picasa-grayscale blog-posts...> 這樣即可。
2. 安裝 js 程式碼
接著在範本中搜尋
請參考程式碼行號進行修改：
E：紅色字串可改為「1. 添加 class 名稱」的自訂名稱。
M：藍色字串即為灰階程度的參數，請參考「二、灰階特效參數」的說明來更改。
五、後話
幾個月前的太陽花學運，不少網站為表響應與支持，暫時將色調改為黑白。現在知道本文的技巧後，要做到這樣的特效就很容易了。以下是利用本文的程式碼，將 DEMO 網頁的圖片改為黑白的效果：
除了本文的灰階特效，後續會整理 PICASA 圖片其他比較實用的特效來介紹。新朋友若不想錯失本站的最新文章，建議可使用 RSS 或 Email 訂閱；如果找不到訂閱按鈕，可前往本站「訂閱網頁」。
PICASA 相關文章：