css精靈圖技術sprite是什么-創新互聯

小編給大家分享一下css精靈圖技術sprite是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務有：成都網站建設、成都做網站、微信公眾號開發、網站優化、網站認證、郫都ssl等。為1000多家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的郫都網站制作公司

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中定義，而非<img>標簽。

在需要用到圖片的時候，現階段是通過CSS屬性background-image組合background-repeat, background-position等來實現圖片的顯示。

示例：

css精靈圖技術sprite是什么

例如這是一張大的精靈圖，我們現在用它來拼出我們想要的字母，例如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>

最終效果：

css精靈圖技術sprite是什么