CSS 圖片重疊效果

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

CSS 圖片重疊效果

範例語法
<style type="text/css">
<!--
#IMG_1{
 position:absolute;
 top:10px;
 left:10px;
 width:150px;
 height:150px;
 background-color:#53E355;
 z-index:1;
}
#IMG_2{
 position:absolute;
 top:30px;
 left:30px;
 width:150px;
 height:150px;
 background-color:#6DA9E7;
 z-index:2;
}
-->
</style>
<img scr="IMG_1" id="IMG_1">
<img scr="IMG_2" id="IMG_2">

第一張圖片是綠色的圖片(色碼:#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 上面,以此類推,就可以做出許多張圖片重疊在一起的效果。

推薦給您的相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C