轉載請註明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html
本節課我們將介紹，如何使用css在不修改圖片源的前提下裝飾你的圖片畫廊。這裡用到的技巧也很簡單，就是在圖片之前建立一個<span>，並在span上使用background-image產生一個遮罩的效果。這種方式既簡單又靈活，demo中介紹了20多種樣式，大家可以參看。
demo預覽地址：http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840
demo：http://www.webdesignerwall.com/file/decorative-gallery-demo.zip
這種css技巧帶來的好處
基本概念
我們需要在包裹img的div中建立一個span元素，在他上面適用background-image來產生遮罩的效果。如果你不喜歡插入一個空的span標籤，我們可以使用javascript來動態產生他，之後我們會介紹到。下面的代碼揭示了他如何工作。
對於css代碼，我們需要注意的是，需要為div設定position:relative，為span設定 position:absolute。這樣你就可以通過為span設定top和left屬性，來任意擺布他在div中的位置了。
IE PNG hack
為了能讓透明的png圖片在ie6中工作，我們需要使用到強大的 iepngfix.htc hack。下載 iepngfix.htc 檔案，並在頁面<head>標籤中添加如下代碼。
<!--[if lt IE 7]><style type="text/css"> .photo span { behavior: url(iepngfix.htc); }</style><![endif]-->
外觀
我們只需要修改指定span元素的css，就能實現不同樣式的變化。查看demo原始碼，你會發現其中的奧秘。
jquery解決方案
如果你不喜歡在頁面中直接添加空的span標籤，可以使用下面的jquery代碼，實現span的動態添加。
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ //預添加 span 標籤 $(".photo a").prepend("<span></span>"); });</script>
#1. 簡單畫廊
讓我們使用之前介紹的技術，來建立畫廊吧。
#1b. 迷你icon這個例子為了展示了，如何在圖片上面放置不同的icon。我們需要為span標籤設定不同的css class 名稱。
#2. 帶文字的圖片
該例子為了展示了如何建立帶文字串連的畫廊。
#2b. 彈出文字#3. 迷你紙夾
#4. 軟木板畫廊 sIFR版本（文字替換）
在這個版本中藉助 sIFR， 實現將em中的文字替換為手寫體。
#4b.膠帶效果#5.黑框藝術畫廊 #5b.金邊藝術畫廊
#6.水彩效果
sIFR版本
#7.高光效果
#8.木板畫廊
最後我們展示如何使用background-image來實現木板的效果。
最後評論
我們可以看到這種css技巧相當的靈活，他極具創造性，他將圖片和css有機的結合在了一起。你也可以使用這種方式，建立自己不同風格的畫廊。
原文地址：http://webdesignerwall.com/tutorials/css-decorative-gallery
HTML5實踐系列
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
