生成web中圖片陰影效果技術研究

施艷昭

（安徽電子信息技術職業學院，安徽 蚌埠 233000）

隨著互聯網技術的發展，網絡資源在個人的學習生活中所占比例越來越大，筆者在本校《ASP.NET動態網站設計》省級精品課程網站開發中深刻體會到頁面作為一個站點構成的主體，它的美觀與否直接能影響用戶的使用體驗，進而影響站點的訪問量.

讓二維網頁上顯示的圖片元素有立體效果，其本質就是在圖片的右邊和底部添加深色的線條，看起來像是圖片受到光照，產生的陰影；利用視覺誤差產生立體效果.那么下面我們就來簡單討論一下web頁面中使用的圖片有哪些辦法可以添加陰影效果.

1 傳統的photoshop處理圖片陰影技術

這種方法適用于（1）需要處理的圖片數量較少.（2）圖片在網頁中顯示位置及大小相對固定的情況下使用.

photoshop處理步驟如下（以下photoshop簡稱為PS）

首先，我們準備一張需要處理的圖片例如cup.jpg，先調整好圖像大小如300*300像素.

（1）打開PS把原圖添加進來

（2）新建一個比原圖高和寬都大5像素的新文件.使用圖層拖動工具將cup.jpg拖動到新建的圖層中后，讓左頂點對齊.然后在ps工具欄選擇：圖層->圖層樣式->投影，選擇投影，然后調整投影顏色、大小和角度到合適即可；然后用ctrl+e合并圖層.最后另存圖片即可得到一個帶有陰影的圖片，用html標記將圖片添加到web頁面中后，使得web中使用的圖片帶有陰影效果（圖1）.

圖1 ps添加陰影效果圖

這種處理方法的優點：（1）只要掌握ps的使用，就可以處理圖片.（2）不用修改任何代碼.

缺點：（1）修改了圖片原樣，增大圖片體積，如果用戶下載圖片后將獲得帶有黑邊的圖片.（2）如果web中有很多圖片需要添加該種效果的話，處理工作量大.（3）需要開發者掌握第三方軟件ps的簡單使用.

2 純css處理的陰影技術

這種方法的原理就是，利用css盒子模型，給不同網頁元素添加邊框，利用邊框的粗細不同和位置控制，產生黑色的底邊.純css圖片陰影效果，這種方法適用于：（1）圖像陰影效果要求不高；（2）網頁中有大量圖片需要集中處理.

該種方法步驟1.給所需要添加效果的圖片添加一個層div標記，并且設置該標記的class為shadow.具體代碼如下：

步驟2.給div和img兩個標記分別設置css，實際就是添加邊框，讓div的邊框粗于img的邊框.

并且img和div中進行填充.具體代碼

頁面顯示效果如圖2：

圖2 css方法添加陰影效果圖

該種方法還有改進的代碼：

這種處理方式優點：（1）不修改web圖片本身.（2）可以在網頁中批量添加圖片，完成陰影效果.這種方式缺點：（1）陰影效果不是的那么明顯.（2）右上頂點和左下頂點細節位置沒有陰影過渡.（3）是如果web中多個圖片大小不同，還要為每張圖片修改css代碼中width值，增大了維護成本.為了克服上述兩種方法的缺點，我們引入第三種處理方法.

3 ps+css處理web圖片陰影技術-洋蔥皮技術

洋蔥皮技術（onion-skin）：該種web圖片陰影處理方法，來自國外，借鑒了傳統動畫制作方法.在原來的動畫制作流程中，動畫師經常使用一種具有洋蔥皮特性的薄且透明的紙來繪畫圖案，這種紙如果是多張疊放在一個明亮的背景燈上面的話，繪畫在下層紙張上的圖案就會顯示在上層的紙張上，動畫師就可以看到前面的圖案，然后按照最上層紙張上的顯現的圖案描繪內容即可，提高了工作效率.

該技術原理用在網頁中，是因為div標記生成的容器性網頁元素，剛好是透明的，如果我們給一張圖片嵌套多個div標記，那么每層div標記包裹的內容最后都會疊加顯示在一起.

處理步驟如下：

步驟1.我們要用ps制作3個背景陰影圖片；第一個圖片叫bg.png.為了能自適應更大范圍的圖片自動添加黑邊，制作這張背景圖片一般分辨率較大，我們可以使用800*800的格式.具體制作過程參考第一種辦法.大家在制作的時候中間區域可以填充白色或者透明色都可.

步驟2.在ps中分別剪切上圖右上頂點，和左下頂點陰影顏色有過渡的地方，5*5像素即可.分別叫right-top.jpg left-bottom.jpg.在剪切上面bg.jpg圖片時候，有技巧，在ps中按住ctrl鍵和“+”號鍵，直到圖層顯示不再放大，把圖片顯示區域移動到左下頂點或者右上頂點去剪切有顏色漸變的位置的圖片.如下圖3所示：

圖3 裁剪過渡陰影背景

剪切獲得方框范圍內的背景透明有顏色漸變圖片，保存為jpg格式，5*5像素.這兩個圖最好不要用png格式，因為png格式支持透明色.透明背景的圖片疊加后不能遮擋下一層背景圖片顯示的黑邊部分.

步驟3.Html代碼部分完成3層div和圖片的嵌套代碼如下和背景陰影位置定位，否則圖片和背景是分離的，就不能使得背景圖片右側和底側的黑邊顯示在web圖片的右側和底側.*/

該技術的思想：就是在img外層包裹3層div用來添加組成陰影背景的圖片.

第一層 添加比較長的右側和下側的邊框陰影，使用我們制作的第一張圖片作為div的背景層使用，該背景必須以右邊下頂點作為對齊條件也就是設置css對齊為right bottom.

如果能接受該種效果的圖片陰影，那么就可以不繼續了.如果你覺得又頂點和左下頂點陰影效果比較生硬；那么繼續添加第二層右上的陰影過渡圖片right-top.jpg，對齊right top.第三層添加左下的陰影過渡圖片left-bottom.jpg，對齊left bottom.

這些設置完成后，只要把圖片包裹在三層div中就可以完成自動添加圖片陰影效果.如:圖4就是在web頁面中添加了3張不同大小圖片后的效果.

圖4 “洋蔥皮”技術自動匹配圖像陰影效果

這種技術組合運用，1.解決了網頁中大量圖片陰影成批生成的問題，提高效率.2.該方法還不破壞原圖大小和結構.3.解決不同大小的圖片陰影自動適應的問題.是我們快速給網頁大量圖片添加陰影效果的一種便捷辦法.4.在web頁面內添加大量的帶陰影效果的圖片后，網頁的體積不會像方法一種增大這么明顯；有較好的代碼重用率.

以上通過三種圖片陰影呈現技術的介紹，我們了解了各自的優缺點，可以在具體的項目中靈活選擇.

〔1〕陸凌牛.HTM L5與CSS3權威指南上[M].北京：機械工業出版社，2013.150-151.

〔2〕神龍影像．Photoshop CS6中文版平面設計實戰從入門到精通 [M].北京：人民郵電出版社，2013.122-123.

〔3〕張良彩.淺談Photoshop印前圖像處理技巧之扣圖[J]．電腦知識與技術，2014.