如何制作并使用css精靈圖/csssprites？

一，什么是css精靈圖？
引用百度百科的原話，CSS Sprites在國(guó)內(nèi)很多人叫css精靈，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去。
二，為什么要使用css精靈圖？
使用css精靈圖主要有兩點(diǎn)好處；
1.讓小圖（小圖標(biāo)），既請(qǐng)求一次大圖，得到所有小圖實(shí)現(xiàn)一次請(qǐng)求，減少對(duì)服務(wù)器的請(qǐng)求速度，避免網(wǎng)頁(yè)造成延遲。
2.方便對(duì)小圖（小圖標(biāo)）的管理。
三，如何制作并使用css精靈圖？
主要分為兩部分：
1.使用ps制作精靈圖；
步驟演示: 新建一個(gè)透明的圖層。
圖1使用alt+鼠標(biāo)滾動(dòng)鍵，放大圖層。 新建參考線；
圖2
在實(shí)際測(cè)量小圖大致寬高后，就開(kāi)始建立參考線。比如，我的小圖大致為25px*25px（寬高不超過(guò)25px*25px）。所以，我在參考線取向上水平方向建立了3條參考線（25像素、50像素、75像素）；垂直方向建立了3條參考線（25像素、50像素、75像素）。

圖3依次放入各個(gè)小圖（小圖標(biāo)）；

　圖4
2.使用css和html代碼顯示精靈圖的各個(gè)小圖。
步驟演示：
2-1.引入圖片；（紅色框內(nèi)為主要代碼）

圖5
代碼如下：
.jlt {
background-image: url(../images/jlt.png);
background-repeat: no-repeat;
display: inline-block;
width: 25px;
height: 25px;
vertical-align: bottom;
margin-bottom: -5px;
}
2-2.利用css定位，定位各個(gè)小圖。
代碼如下：
.f1 {
background-position: 0px 0px;
}
.f2 {
background-position: -25px 0px;
}
.f3 {
background-position: 0px -25px;
}
2-3.使用html代碼，使小圖顯示。
代碼如下：

3-3.最終效果展示。

圖6

四，總結(jié)：

圖7
由圖7得，根據(jù)各個(gè)比較，最后得出：當(dāng)背景定位為0px 0px時(shí)；得到原點(diǎn)。改變數(shù)字就得到各個(gè)軸上的圖片；
當(dāng)?shù)谝粋€(gè)數(shù)字是正數(shù)時(shí)，為空（以原點(diǎn)為起始點(diǎn)，向左移動(dòng)）；當(dāng)我第一個(gè)數(shù)字為負(fù)數(shù)時(shí)（以起點(diǎn)為原點(diǎn)，向右移動(dòng)）。
當(dāng)?shù)诙€(gè)數(shù)字為正數(shù)時(shí)，為空（以原點(diǎn)為起始點(diǎn)，向左移動(dòng)）；當(dāng)我第二個(gè)數(shù)字為負(fù)數(shù)時(shí)（以起點(diǎn)為原點(diǎn)，向下移動(dòng)）。
因此，第一個(gè)數(shù)字控制左右（正為左，負(fù)為右）；第二個(gè)數(shù)字控制上下（正為上，負(fù)為下）；原點(diǎn)的上方和左方都沒(méi)有圖標(biāo)，所以為空。
Ps：如果我要得到白色襪子的話，數(shù)字為（-50px 0px）;如果我要黃色襪子的話，數(shù)字為（-50px -25px）。
溫馨提示：使用行內(nèi)元素是無(wú)法顯示圖片的。

文章名稱：如何制作并使用css精靈圖/csssprites？
轉(zhuǎn)載注明：http://muchs.cn/news/240101.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、ChatGPT、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、商城網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(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)