CSS 圖像拼合技術
CSS 圖像拼合技術
圖像拼合
圖像拼合就是單個圖像的集合。
有許多圖像的網頁可能需要很長的時間來加載和生成多個服務器的請求。
使用圖像拼合會降低服務器的請求數量，併節省帶寬。
圖像拼合 - 簡單實例
與其使用三個獨立的圖像，不如我們使用這種單個圖像（"img_navsprites.gif"）：
有了CSS，我們可以只顯示我們需要的圖像的一部分。
在下面的例子CSS指定顯示 "img_navsprites.gif" 的圖像的一部分：
實例解析：
- <img class="home" src="img_trans.gif" /> -因為不能為空,src屬性只定義了一個小的透明圖像。顯示的圖像將是我們在CSS中指定的背景圖像
- 寬度：46px;高度：44px; - 定義我們使用的那部分圖像
- background:url(img_navsprites.gif) 0 0; - 定義背景圖像和它的位置（左0px，頂部0px）
這是使用圖像拼合最簡單的方法，現在我們使用鏈接和懸停傚果。
圖像拼合 - 創建一個導航列表
我們想使用拼合圖像 ("img_navsprites.gif")，以創建一個導航列表。
我們將使用一個HTML列表，因為它可以鏈接，同時還支持背景圖像：
實例
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
嘗試一下 »
實例解析：
- #navlist{position:relative;} - 位置設置相對定位，讓里面的絕對定位
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設置為0，列表樣式被刪除，所有列表項是絕對定位
- #navlist li, #navlist a{height:44px;display:block;} - 所有圖像的高度是44px
現在開始每個具體部分的定位和樣式：
- #home{left:0px;width:46px;} - 定位到最左邊的方式，以及圖像的寬度是46px
- #home{background:url(img_navsprites.gif) 0 0;} - 定義背景圖像和它的位置（左0px，頂部0px）
- #prev{left:63px;width:43px;} - 右側定位63px（＃home寬46px+項目之間的一些多余的空間），寬度為43px。
- #prev{background:url('img_navsprites.gif') -47px 0;} - 定義背景圖像右側47px（＃home寬46px+分隔線的1px）
- #next{left:129px;width:43px;}- 右邊定位129px(#prev 63px + #prev寬是43px + 剩余的空間), 寬度是43px.
- #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定義背景圖像右邊91px（＃home 46px+1px的分割線+＃prev寬43px+1px的分隔線）
圖像拼合s - 懸停傚果
現在，我們希望我們的導航列表中添加一個懸停傚果。
|
:hover 選擇器用於鼠標懸停在元素上的顯示的傚果 提示： :hover 選擇器可以運用於所有元素。 |
我們的新圖像 ("img_navsprites_hover.gif") 包含三個導航圖像和三幅圖像：
因為這是一個單一的圖像，而不是6個單獨的圖像文件，當用戶停留在圖像上不會有延遲加載。
我們添加懸停傚果只添加三行代碼：
實例
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
嘗試一下 »
實例解析：
- 由於該列表項包含一個鏈接，我們可以使用：hover偽類
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對於所有三個懸停圖像，我們指定相同的背景位置，只是每個再向下45px