零基礎(chǔ)教你學(xué)前端——73、CSS精靈圖

時(shí)間：2023-07-06 15:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-06 15:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

零基礎(chǔ)教你學(xué)前端——73、CSS精靈圖：我們學(xué)習(xí)CSS背景的應(yīng)用——CSS 精靈圖。

什么是精靈圖呢？先來(lái)看一個(gè)案例——在這個(gè)頁(yè)面中，使用到了各種各樣的小圖片。

如何在頁(yè)面中插入這些小圖片呢？你的思維慣性，一定是應(yīng)用 img 或者 background-image 來(lái)實(shí)現(xiàn)。大家思考一下，如果頁(yè)面中只有幾個(gè)簡(jiǎn)單的圖片素材，我們可以采用 img 元素來(lái)引入圖片，可是當(dāng)網(wǎng)站圖片過(guò)多的時(shí)候，一張圖片一張圖片的引入，就顯得不方便了。

最重要的是，每張圖片的顯示，都是由瀏覽器發(fā)送請(qǐng)求，通過(guò)互聯(lián)網(wǎng)，服務(wù)器接收到請(qǐng)求后，再通過(guò)互聯(lián)網(wǎng)，返回請(qǐng)求內(nèi)容。如果一個(gè)頁(yè)面里有上百?gòu)垐D片，哪怕是很小的圖標(biāo)，都需要經(jīng)歷一次這樣的過(guò)程。毋庸置疑，因?yàn)檎?qǐng)求網(wǎng)絡(luò)資源過(guò)于頻繁，整個(gè)頁(yè)面的加載速度就會(huì)變慢。

此時(shí)，我們就可以使用精靈圖技術(shù)來(lái)解決這個(gè)問(wèn)題了！

精靈圖，也稱雪碧圖、妖怪圖，基本原理就是將頁(yè)面中使用到的各種圖片進(jìn)行分類(lèi)，整齊劃一的擺在一張背景透明的圖片上面，通過(guò) CSS 的背景技術(shù)實(shí)現(xiàn)圖片的引入，從而減少服務(wù)器發(fā)送和接收請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度。

例如，頁(yè)面中有一個(gè)元素，使用 background-image 的方法，插入一張精靈圖。

默認(rèn)背景圖片的左上角字母“a”顯示在元素內(nèi)部，如果想要將字母 O 顯示在元素中，就要使用background-position 屬性調(diào)整背景圖片的位置。

在 ps 軟件中打開(kāi)精靈圖（ http://ps.gaoding.com），使用圈選工具，從圖片的左上角測(cè)量到字母"O"的左上角，測(cè)量距離為：水平 390px，垂直 105px。

因?yàn)楸尘皥D片整體需要向左上角移動(dòng)，所以 background-position 的值兩個(gè)方向都是負(fù)數(shù)：分別為 -390px 和 -105px。此時(shí)，字母 o 已經(jīng)顯示在元素內(nèi)部。

如果位置測(cè)量有偏差，可以在瀏覽器的開(kāi)發(fā)者工具中，找到頁(yè)面元素，選中屬性值，按下鍵盤(pán)的上下箭頭，對(duì)屬性值進(jìn)行微調(diào)，位置調(diào)整滿意后，根據(jù)這個(gè)值來(lái)修改樣式。

也許你會(huì)問(wèn)，精靈圖是前端工程師制作的嗎？實(shí)際上，在團(tuán)隊(duì)的網(wǎng)站開(kāi)發(fā)中，網(wǎng)頁(yè)所需要的各種圖片，UI設(shè)計(jì)師都會(huì)為我們準(zhǔn)備好，我們直接使用即可。

接下來(lái)，我們就使用精靈圖技術(shù)，完成 “千鋒” 拼音首字母的展示。

創(chuàng)建 014-sprites 文件夾，在文件夾下創(chuàng)建 sprites.html 文件和 sprites-style.css 文件，打開(kāi)html，構(gòu)建基礎(chǔ)代碼，引入外部樣式。

使用 emmet 命令：div.box$*2 快速創(chuàng)建兩個(gè)帶有類(lèi)名的 div 元素。

HTML<div class="box1"></div><div class="box2"></div>打開(kāi) css 文件，定義 div 元素選擇器，聲明樣式：width: 50px，height: 70px，border: 2px solid gray。

先看一下效果，兩個(gè)帶有灰色邊框，縱向排列的容器就做好了！

繼續(xù)給 div 添加樣式：float: left，margin: 10px。

此時(shí)，容器已經(jīng)橫向顯示，容器之間也有了間距。

CSSdiv{ width:50px; height:70px; border: 2px solid gray; float:left; margin:10px;}再定義一個(gè) .box1 選擇器，聲明樣式：background: url(sprites.png) no-repeat。

預(yù)覽一下效果，字母 “a” 已經(jīng)在第一個(gè)容器中顯示出來(lái)。

在 ps 中使用圈選工具，測(cè)量圖片左上角到字母 “q” 左上角的水平距離為 545px，垂直距離為 110px。

給 background 屬性追加樣式值：-545px -110px。

這樣，字母 “q” 就顯示出來(lái)了！如果對(duì)位置不滿意，可以在這里微調(diào)。

CSS.box1{ background:url(sprites.png) no-repeat -545px -105px;}重復(fù)前面的操作。在 ps 里測(cè)量字母 f 的位置，水平方向 390px，垂直方向 20px。

再定義一個(gè) .box2 選擇器，聲明樣式：background: url(sprites.png) no-repeat -390px -20px；

再看一下效果，字母 “f” 也顯示出來(lái)了。也可以微調(diào)一下位置。

CSS.box2{ background:url(sprites.png) no-repeat -386px -14px;}
文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=76