css sprites 多張圖片整合在一張圖片上

時間 2019-11-14

標籤 css sprites 圖片整合一張欄目 CSS 简体版

原文原文鏈接

1、什麼是css sprites

css sprites直譯過來就是CSS精靈。一般被解釋爲「CSS圖像拼合」或「CSS貼圖定位」。其實就是經過將多個圖片融合到一張圖裏面，而後經過CSS background背景定位技術技巧佈局網頁背景。這樣作的好處也是顯而易見的，由於圖片多的話，會增長http的請求，無疑促使了網站性能的減低，特別是圖片特別多的網站，若是能用css sprites下降圖片數量，帶來的將是速度的提高。css

css sprites是什麼通俗解釋：CSS Sprites其實就是把網頁中一些背景圖片整合拼合成一張圖片中，再利用DIV CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片在佈局盒子對象位置。html

2、適合與不適合DIV CSS sprites拼合佈局

一、適合：通常小圖標素材
小的圖標ico類素材，通常圖標很小十多像素幾十像素的寬度高度，這種適合拼合成一張圖實現sprites background背景定位佈局。多小ico太多天然加載網頁時瞬間會消耗些http iis連接數，但很快加載完又會釋放。es6

二、不適合：大圖大背景
大背景通常用於網頁背景，拼合時，設置爲網頁背景時全部背景都會顯示出來。大圖拼接拼合會增大圖片大小，網絡帶寬很差的訪問者訪問時因爲背景圖大文件大會加載稍慢些，因此大圖不推薦拼接拼合來使用css sprites背景定位佈局。網絡

三、sprites適合推薦小結
通常此sprites拼合佈局用於局部小盒子佈局不適合大背景大布局背景使用。好比小局部佈局小圖標背景、小導航背景等DIVCSS佈局。工具

3、div css sprites優點與缺點劣勢判斷選擇

一、sprites優點：
若干小圖標拼合成一張圖後佈局，減小http iis請求數，對於大戰大流量網站來講隱形優點很顯然的，從而隱形地提高了網站性能。對於大流量網站來講原本http請求數比較寶貴，使用DIV+CSS Sprites這樣能夠大大的提升了頁面的性能，這是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由，同時也減小圖片文件數目。佈局

二、sprites缺點
在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好只夠的空間，防止板塊內不會出現沒必要要的背景，若是留空間或拼合位置不合適，在佈局時容易出現佈局這個盒子對象時，設置背景出現拼合相鄰圖片，干擾圖片的狀況;性能

CSS Sprites在開發的時候比較麻煩，你要經過photoshop(PS)或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣;網站

CSS Sprites在維護的時候比較麻煩，sprites是通常雙刃劍，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，有隻能（最好）往下加圖片，這樣圖片的字節就增長了，由於每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣，並且從新算圖片的位置（尤爲是這種上千px的圖）也是一件頗爲不爽的事情ui

因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。url

三、DIVCSS5推薦小結
猶豫拼接圖片須要必定經驗技巧（作實踐便可快速掌握）、測量定位數值、修改不是那麼靈活等緣由，通常小網站站、小流量網站、通常企業網站不是很推薦使用CSS Sprites，由於使用CSS Sprites會比普通單個背景圖片佈局要耗費時間和精力，因此不是很推薦小站。但這個佈局技巧也必需要學會掌握靈活佈局纔是目的。小站HTTP請求數豐富這點拼接其實也起不來什麼優點反而會浪費寶貴時間。相反大網站大流量網站推薦使用，這樣比較值得。

4、css sprites實例

sprites案例圖片素材:

實例代碼：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
    <style>
        .sprites div {
            margin: 5px;
        }
        .sprites span {
            float: left;
            width: 20px;
            height: 20px;
            background-image: url(sprite.png);
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0;
        }
        .sprites3{
            background-position: 0 -20px;
        }
        .sprites4{
            background-position: -20px -20px;
        }
        .sprites5{
            background-position: -40px 0;
        }
        .sprites6{
            background-position: -40px -20px;
        }
    </style>
</head>
<body>
<div class="sprites">
    <div><span class="sprites1"></span>付款圖標</div>
    <div><span class="sprites2"></span>刪除圖標</div>
    <div><span class="sprites3"></span>存款圖標</div>
    <div><span class="sprites4"></span>粘貼圖標</div>
    <div><span class="sprites5"></span>笑臉圖標</div>
    <div><span class="sprites6"></span>編輯圖標</div>
</div>
</body>
</html>

sprites實例效果：

說明：背景background-position有兩個數值，前一個表明靠左距離值（可爲正可爲負），第二個數值表明靠上距離值（可爲正可爲負）。當爲正數時，表明背景圖片做爲對象盒子背景圖片時靠左和靠上多少距離多少開始顯示背景圖片；當爲負數時表明背景圖片做爲盒子對象背景圖片，將背景圖片拖動超出盒子對象左邊多遠，拖動超出盒子對象上邊多遠開始顯示此背景圖片。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。