想要在網頁上呈現黑白(灰階)圖片效果，最簡單的方法就是利用影像軟體後製，操作熟練的話很快就能完成。不過，若是網頁有很多圖片、或是不定時需要灰階效果的話怎麼辦？重新上傳也是麻煩，這時如果能透過語法，只針對需要灰階的圖片進行處理，算是最方便的解決辦法。CSS3 / HTML5 語法都可以做到這種特效，但可惜的是，不是每種瀏覽器版本都支援，要做到跨瀏覽器相容是一件痛苦的事，可參考這篇「使用CSS將圖片轉換成黑白」就能知道原因。目前比較完美的方法，就是安裝 js 外掛，利用程式運算來解決了。
而本文 WFU 要分享的技巧，不須靠後製、也不需要研究任何語法，只要使用 PICASA(Google+相簿) 的圖床，在圖片網址加上一些參數，就能變成黑白圖片。以下就來看看這個魔法，以及各種應用方式吧！
一、PICASA 圖片網址原理
PICASA 圖片網址的基本參數原理，可參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」，利用改變參數的數字大小，就能改變圖片的尺寸。
不過除了圖片尺寸，PICASA 還能藉由改變參數來達到一些特效，則是從 +綜合口味 發表的這個「Blogger社群討論串」得知，加上一長串複雜的參數後，可以達到毛玻璃的效果。
例如上圖的網址為："https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/s400/wfublog.jpg"
插入這行參數後："-fcrop64=1,000007b9ffffd845:Soften=1,60,0"
圖片網址成為："https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/-fcrop64=1,000007b9ffffd845:Soften=1,60,0/wfublog.jpg"
效果就像下面這張糊掉了的圖片：
因此，關鍵在於調整 "fcrop64" 及 "Soften" 的參數。而找到其他特效參數的話，也能如法炮製，做出比美後製軟體的特效。，本文首先要介紹的是，算是滿實用的 "灰階" 特效。
二、灰階特效參數
1. 簡化參數
原本的字串 "fcrop64" 參數過長，且會裁切圖片。經測試後，參數可簡化為 "1,ffffffaa"，並可維持原圖尺寸。
2. 灰階字串參數
最後找到的關鍵字串及參數為 "ansel=1,ffffff"，後面的 "ffffff" 是色碼。
3. 不同色系的灰階消果
如果使用了 "ffffff" 參數，代表為一般的 "黑白" 效果，如果使用了不同的色碼代號，就能呈現各種灰階效果，以下使用三原色的色碼舉例(查詢色碼請參考「網頁色碼選擇器」)──
紅色：上圖使用色碼 "FF0000"，圖片網址參數為──
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/,ffffffaa:ansel=1,FF0000/wfublog.jpg
黃色：上圖使用色碼 "FFFF00"，圖片網址參數為──
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/,ffffffaa:ansel=1,FFFF00/wfublog.jpg
藍色：上圖使用色碼 "0000FF"，圖片網址參數為──
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/,ffffffaa:ansel=1,0000FF/wfublog.jpg
相信以上三種灰階效果，肉眼是可以分辨地出來。若真的看不出來(螢幕跟 WFU 一樣爛的話)，可點擊這三張圖片另開分頁，在不同分頁間切換即可看出差別。而想顯示不同的灰階，只要置換其他不同的色碼即可。
三、Hover 效果應用
瞭解 PICASA 圖片灰階效果的參數如何使用後，接下來介紹一個簡單的 Hover 效果，將原本的圖片設定成黑白，滑鼠經過時顯示原圖，只要利用簡短的語法就能完成。
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/s400/wfublog.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPvmYr5jZkbqr3Hr0z3SuZb8_UUFBkX32P3AGvotZYovzOz1h422LauRvnk3IlLs7FfVLqnEaHjHnlP22bmZpw-Nb2bbBEhgRgfqX2s6eL-xDwIhHQ7vGjecGP2RD00DiUkm8P8pQtGio/-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 相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。