CSS如何使用圖像拼合技術？

本章為大家介紹CSS如何使用影像拼合技術？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、圖像拼合

圖像拼合就是單一圖像的集合。

有許多圖像的網頁可能需要很長的時間來載入和產生多個伺服器的請求。

使用影像拼合會降低伺服器的請求數量，並節省頻寬。

二、圖像拼合- 簡單實例

#與其使用三個獨立的圖像，不如我們使用這種單一圖像（"img_navsprites. gif"）：

有了CSS，我們可以只顯示我們需要的圖像的一部分。

在下面的例子CSS指定顯示"img_navsprites.gif" 的映像的一部分：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

實例解析：

• ## -因為不能為空,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{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;}

實例解析：

• 由於該清單項目包含一個鏈接，我們可以使用：hover偽類

• #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對於所有三個懸停圖像，我們指定相同的背景位置，只是每個再向下45px

以上是CSS如何使用圖像拼合技術？的詳細內容。更多資訊請關注PHP中文網其他相關文章！