CSS 圖片重疊效果

在新代的網頁設計風格呈現，時常會用到數張圖片重疊的效果，例如做一些相冊或圖集，這樣重疊的效果總是帶給人比較立體的感覺，常見的做法是先做好美工圖片，然後插入到網頁中，另一種做法則是直接透過 CSS 的 z-index 與 position 功能來達到，舉立下方這樣的兩張圖片重疊在一起，只用到了簡單的 CSS 語法就可以達成，不需要額外用 GIMP 美工軟體製作圖片。

CSS 圖片重疊效果

範例語法

第一張圖片是綠色的圖片（色碼：#53E355），第二張疊在上面的圖片是藍色的圖片（色碼：#6DA9E7），用 <style tyle="text/css"> 與 </style> 標籤包起來的就是 CSS 語法，用來控制最下方兩個 <img> 圖片標籤的樣式，對 IMG_1 位置設定為絕對位置，即 position:absolute 這段語法，靠上邊與左邊的距離均為 10px，對 IMG_2 圖片的位置設定也是絕對位置，只不過靠上邊與靠左邊的位置與 IMG_1 不同，目的是單純的讓兩張圖片可以呈現重疊的效果而以。比較重要的是 z-index 的設定，z-index 數字越小的圖片會被壓在越下面，所以這個範例的 IMG_2 會壓在 IMG_1 上面，以此類推，就可以做出許多張圖片重疊在一起的效果。

推薦給您的相關主題