css精靈圖技術(shù)sprite是什么-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、郫都ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的郫都網(wǎng)站制作公司

css精靈技術(shù)是將很多的小圖片合并到一張較大的圖片里，所以在首次加載頁(yè)面的時(shí)候，就不用加載過(guò)多的小圖片，只需要加載出來(lái)將小圖片合并起來(lái)的那一張大圖片即可，這樣可在一定程度上提高了頁(yè)面的加載速度，緩解服務(wù)器的壓力，節(jié)約服務(wù)器的流量。

css精靈圖技術(shù)（sprite）是什么？

css精靈圖技術(shù)（sprite）直譯為“CSS精靈”，也被稱(chēng)為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。

其實(shí)就是把一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)，當(dāng)訪(fǎng)問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。

精靈圖技術(shù)產(chǎn)生的原因：

很多大型網(wǎng)頁(yè)在首次加載的時(shí)候都需要加載很多的小圖片，而考慮到在同一時(shí)間，服務(wù)器擁堵的情況下，為了解決這一問(wèn)題，采用了精靈圖這一技術(shù)來(lái)緩解加載時(shí)間過(guò)長(zhǎng)從而影響用戶(hù)體驗(yàn)的這個(gè)問(wèn)題。

css精靈圖技術(shù)的作用

所謂精靈圖就是把很多的小圖片合并到一張較大的圖片里，所以在首次加載頁(yè)面的時(shí)候，就不用加載過(guò)多的小圖片，只需要加載出來(lái)將小圖片合并起來(lái)的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁(yè)面的加載速度，也一定程度上緩解了服務(wù)器的壓力。

1、減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)

可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁(yè)面的加載速度，節(jié)約服務(wù)器的流量。

2、提高頁(yè)面的加載速度

sprite 技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張 GIF 圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。

單張的 GIF 只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來(lái)的圖片總尺寸小。

3、減少鼠標(biāo)滑過(guò)的一些bug

IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過(guò)即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過(guò)會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。

css精靈技術(shù)的使用方法

css精靈圖（sprite）其實(shí)就是通過(guò)將多個(gè)圖片融合到一張圖片文件中，使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。

在需要用到圖片的時(shí)候，現(xiàn)階段是通過(guò)CSS屬性background-image組合background-repeat, background-position等來(lái)實(shí)現(xiàn)圖片的顯示。

示例：

css精靈圖技術(shù)sprite是什么

例如這是一張大的精靈圖，我們現(xiàn)在用它來(lái)拼出我們想要的字母，例如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精靈圖技術(shù)sprite是什么

其實(shí)說(shuō)白了就是將精靈圖設(shè)為一個(gè)大背景，然后通過(guò)background-position來(lái)移動(dòng)背景圖，從而顯示出我們想要顯示出來(lái)的部分。

精靈圖雖然實(shí)現(xiàn)了緩解服務(wù)器壓力以及用戶(hù)體驗(yàn)等問(wèn)題，但還是有一個(gè)很大的不足，那就是牽一發(fā)而動(dòng)全身。這些圖片的背景都是我們?cè)敿?xì)測(cè)量而得出來(lái)的，如果需要改動(dòng)頁(yè)面，將會(huì)是很麻煩的一項(xiàng)工作。。。

以上是css精靈圖技術(shù)sprite是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：css精靈圖技術(shù)sprite是什么-創(chuàng)新互聯(lián)
地址分享：http://bm7419.com/article6/dicoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、小程序開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容