CSS使用圖像拼合技術(shù)的方法

小編給大家分享一下CSS使用圖像拼合技術(shù)的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

淮陰ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

一、圖像拼合

圖像拼合就是單個(gè)圖像的集合。

有許多圖像的網(wǎng)頁(yè)可能需要很長(zhǎng)的時(shí)間來(lái)加載和生成多個(gè)服務(wù)器的請(qǐng)求。

使用圖像拼合會(huì)降低服務(wù)器的請(qǐng)求數(shù)量，并節(jié)省帶寬。

二、圖像拼合 - 簡(jiǎn)單實(shí)例

與其使用三個(gè)獨(dú)立的圖像，不如我們使用這種單個(gè)圖像（"img_navsprites.gif"）：

CSS使用圖像拼合技術(shù)的方法

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

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

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

實(shí)例解析：

  • <img class="home" src="img_trans.gif" /> -因?yàn)椴荒転榭?src屬性只定義了一個(gè)小的透明圖像。顯示的圖像將是我們?cè)贑SS中指定的背景圖像

  • 寬度：46px;高度：44px; - 定義我們使用的那部分圖像

  • background:url(img_navsprites.gif) 0 0; - 定義背景圖像和它的位置（左0px，頂部0px）

這是使用圖像拼合最簡(jiǎn)單的方法，現(xiàn)在我們使用鏈接和懸停效果。

三、圖像拼合 - 創(chuàng)建一個(gè)導(dǎo)航列表

我們想使用拼合圖像 ("img_navsprites.gif")，以創(chuàng)建一個(gè)導(dǎo)航列表。

我們將使用一個(gè)HTML列表，因?yàn)樗梢枣溄樱瑫r(shí)還支持背景圖像：

#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;}

實(shí)例解析：

  • #navlist{position:relative;} - 位置設(shè)置相對(duì)定位，讓里面的絕對(duì)定位

  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設(shè)置為0，列表樣式被刪除，所有列表項(xiàng)是絕對(duì)定位

  • #navlist li, #navlist a{height:44px;display:block;} - 所有圖像的高度是44px

現(xiàn)在開(kāi)始每個(gè)具體部分的定位和樣式：

  • #home{left:0px;width:46px;} - 定位到最左邊的方式，以及圖像的寬度是46px

  • #home{background:url(img_navsprites.gif) 0 0;} - 定義背景圖像和它的位置（左0px，頂部0px）

  • #prev{left:63px;width:43px;} - 右側(cè)定位63px（＃home寬46px+項(xiàng)目之間的一些多余的空間），寬度為43px。

  • #prev{background:url('img_navsprites.gif') -47px 0;} - 定義背景圖像右側(cè)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 - 懸停效果

現(xiàn)在，我們希望我們的導(dǎo)航列表中添加一個(gè)懸停效果。

:hover 選擇器用于鼠標(biāo)懸停在元素上的顯示的效果

提示： :hover 選擇器可以運(yùn)用于所有元素。

我們的新圖像 ("img_navsprites_hover.gif") 包含三個(gè)導(dǎo)航圖像和三幅圖像：

CSS使用圖像拼合技術(shù)的方法

因?yàn)檫@是一個(gè)單一的圖像，而不是6個(gè)單獨(dú)的圖像文件，當(dāng)用戶停留在圖像上不會(huì)有延遲加載。

我們添加懸停效果只添加三行代碼：

#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;}

實(shí)例解析：

  • 由于該列表項(xiàng)包含一個(gè)鏈接，我們可以使用：hover偽類

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

看完了這篇文章，相信你對(duì)CSS使用圖像拼合技術(shù)的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前名稱：CSS使用圖像拼合技術(shù)的方法
瀏覽地址：http://www.muchs.cn/article40/ishiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名