CSS精靈圖(sprite)

88107 閱讀 0 評(píng)論 0 點(diǎn)贊

一、什么是精靈圖？

當(dāng)用戶訪問(wèn)一個(gè)網(wǎng)站時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送一系列請(qǐng)求，比如說(shuō)網(wǎng)頁(yè)上的每張圖像都需要經(jīng)過(guò)一次請(qǐng)求才能最終展示給用戶。然而，一個(gè)網(wǎng)頁(yè)中往往包含大量的圖像資源（例如在頁(yè)面中展示的圖片、網(wǎng)頁(yè)的背景圖像以及一些裝飾性的圖像等），這就會(huì)導(dǎo)致瀏覽器頻繁的請(qǐng)求服務(wù)器，大大降低網(wǎng)頁(yè)的加載速度。為了有效的減少請(qǐng)求服務(wù)器的次數(shù)，提高頁(yè)面加載的速度，就出現(xiàn)了 CSS Sprites 技術(shù)，也被稱為精靈技術(shù)。

所謂精靈圖就是圖片拼合技術(shù)，它就是把多張小圖合成一張大圖，通過(guò)css中的background-position屬性，顯示精靈圖中某一個(gè)小圖標(biāo)。

淘寶網(wǎng)中的精靈圖

圖：淘寶網(wǎng)中的精靈圖

精靈圖如下：

精靈圖

二、精靈圖的優(yōu)點(diǎn)

1. 采用了精靈圖這一技術(shù)可以緩解加載時(shí)間過(guò)長(zhǎng)從而影響用戶體驗(yàn)的這個(gè)問(wèn)題。

2. 在一定程度上減少了頁(yè)面的加載速度，也一定程度上緩解了服務(wù)器的壓力。

3. 使用精靈圖可以有效減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，從而達(dá)到提高頁(yè)面的加載性能。

三、精靈圖的基本用法

1. 工具：PS、HBuilder

2. 素材：任意一張精靈圖都行

步驟一：打開(kāi)ps導(dǎo)入精靈圖

這里拼出的字母案例為YY

打開(kāi)ps導(dǎo)入精靈圖

步驟二：測(cè)量字母的大小及坐標(biāo)

（1）通過(guò)矩形選框工具，測(cè)量字母的大小，并將div的大小設(shè)置為字母的大小。

（2）打開(kāi)窗口菜單欄中的信息，可以查詢字母width、height、x軸和y軸的信息。

（3）將鼠標(biāo)光標(biāo)移動(dòng)到字母的左上角位置，通過(guò)右側(cè)的信息面板測(cè)出x和y的值。

（4）在css中編寫style樣式，通過(guò)background-position定位到字母所在的位置。

示意圖

效果圖

代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>精靈圖的使用</title>
		<style>
			/* 共同的樣式 */
			div{
				background: url(D:/dotcpp/img/picture.jpg) ;/* 導(dǎo)入精靈圖資源 */
				float: left;/* 設(shè)置向左浮動(dòng) */
			}
			.box1{
				/* 盒子的高度寬度要和精靈圖的大小一致 */
				width: 149px;
				height: 140px;
				background-position: 296px 143px;/* 分別對(duì)應(yīng)x 和 y 軸 */
				/* 在ps中進(jìn)行定位的時(shí)候，把光標(biāo)放在矩形選區(qū)的左上角，可以得到位置 */
			}
			
			.box2{
				/* 盒子的高度寬度要和精靈圖的大小一致 */
				width: 149px;
				height: 140px;
				background-position: 296px 143px;/* 分別對(duì)應(yīng)x 和 y 軸 */
				/* 在ps中進(jìn)行定位的時(shí)候，把光標(biāo)放在矩形選區(qū)的左上角，可以得到位置 */
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

點(diǎn)贊(0)