css精靈技術有什麼用？
- 青灯夜游原創
- 2020-11-09 16:10:133507瀏覽
css精靈技術是將很多的小圖片合併到一張較大的圖片裡，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合併起來的那一張大圖片即可，這樣可在一定程度上提高了頁面的載入速度，緩解伺服器的壓力，節約伺服器的流量。
推薦教學：CSS影片教學
css精靈圖技術（sprite）是什麼？
css精靈圖技術（sprite）直譯為“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“ CSS雪碧圖”，是一種網頁圖片應用程式處理方式。
其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
精靈圖技術產生的原因：
許多大型網頁在首次載入的時候都需要載入很多的小圖片，而考慮到在同一時間，伺服器擁擠的情況下，為了解決這個問題，採用了精靈圖這項技術來緩解載入時間過長而影響使用者體驗的這個問題。
css精靈圖技術的作用
所謂精靈圖就是把很多的小圖片合併到一張較大的圖片裡，所以在第一次載入頁面的時候，就不用載入過多的小圖片，只需要載入出來將小圖片合併起來的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁面的載入速度，也一定程度上緩解了伺服器的壓力。
1、減少載入網頁圖片時對伺服器的請求次數
可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要呼叫一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。
2、提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。
單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
3、減少滑鼠滑過的一些bug
IE6不會主動預先載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
css精靈技術的使用方法
css精靈圖（sprite）其實就是透過將多個圖片融合到一張圖片檔案中，使用CSS background和background -position屬性渲染，這也意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非標籤。
在需要用到圖片的時候，現階段是透過CSS屬性background-image組合background-repeat, background-position等來實現圖片的顯示。
範例：
例如這是一張大的精靈圖，我們現在用它來拼出我們想要的字母，例如ANDY
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.aa{
width: 108px;
height: 110px;
background-position: 0 -9px;
}
.nn{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.dd{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>最終效果：
其實說白了就是將精靈圖設為一個大背景，然後透過background-position來移動背景圖，從而顯示出我們想要顯示出來的部分。
精靈圖雖然實現了緩解伺服器壓力以及使用者體驗等問題，但還是有一個很大的不足，那就是牽一發而動全身。這些圖片的背景都是我們詳細測量而得出來的，如果需要改變頁面，將會是很麻煩的一項工作。 。 。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是css精靈技術有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！