本節課我們将介紹，如何使用css在不修改圖檔源的前提下裝飾你的圖檔畫廊。這裡用到的技巧也很簡單，就是在圖檔之前建立一個<span>，并在span上使用background-image生成一個遮罩的效果。這種方式既簡單又靈活，demo中介紹了20多種樣式，大家可以參看。
節約時間 — 你不需要在photoshop中建立圖檔模闆，然後為每張圖檔生成獨立檔案。
保留原始圖檔源 — 我們不用擔心日後需要更換圖檔主題的時候，沒有原圖檔。因為我們根本沒有修改他。
相當的靈活 — 你隻需要調整css就能換一個完全不同的樣式。
在任何站點都能工作 — 這個css技巧在任何站點，任何圖檔大小下都适用。
解決浏覽器相容問題 — 通過了大多數浏覽器的測試 (Firefox, Safari, Opera, 甚至包括行為怪異的IE6)。
我們需要在包裹img的div中建立一個span元素，在他上面适用background-image來産生遮罩的效果。如果你不喜歡插入一個空的span标簽，我們可以使用javascript來動态生成他，之後我們會介紹到。下面的代碼揭示了他如何工作。
對于css代碼，我們需要注意的是，需要為div設定position:relative，為span設定 <code>position:absolute。這樣你就可以通過為span設定top和left屬性，來任意擺布他在div中的位置了。</code>
我們隻需要修改指定span元素的css，就能實作不同樣式的變化。檢視demo源代碼，你會發現其中的奧秘。
如果你不喜歡在頁面中直接添加空的span标簽，可以使用下面的jquery代碼，實作span的動态添加。
讓我們使用之前介紹的技術，來建立畫廊吧。
這個例子為了展示了，如何在圖檔上面放置不同的icon。我們需要為span标簽設定不同的css class 名稱。
該例子為了展示了如何建立帶文字連接配接的畫廊。
最後我們展示如何使用background-image來實作木闆的效果。
我們可以看到這種css技巧相當的靈活，他極具創造性，他将圖檔和css有機的結合在了一起。你也可以使用這種方式，建立自己不同風格的畫廊。
<a href="http://www.cnblogs.com/softlover/tag/HTML5%E5%AE%9E%E8%B7%B5/">HTML5實踐系列</a>
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>