css sprite

時間 2019-11-17

標籤 css sprite 欄目 CSS 简体版

原文原文鏈接

1、相關知識講解css

看過雅虎的前端優化35條建議，都知道優化前端是有多麼重要。頁面的加載速度直接影響到用戶的體驗。80%的終端用戶響應時間都花在了前端上，其中大部分時間都在下載頁面上的各類組件：圖片，樣式表，腳本，Flash等等。html

減小組件數必然可以減小頁面提交的HTTP請求數。這是讓頁面更快的關鍵。減小頁面組件數的一種方式是簡化頁面設計。但有沒有一種方法能夠在構建複雜的頁面同時加快響應時間呢？嗯，確實有魚和熊掌兼得的辦法。前端

這裏咱們就拿雅虎的第一條建議：儘可能減小HTTP請求數裏的減小圖片請求數量進行講解。服務器

咱們都知道，一個網站的一個頁面可能有不少小圖標，例如一些按鈕、箭頭等等。當加載html文檔時，只要遇到有圖片的，都會自動創建起HTTP請求下載，而後將圖片下載到頁面上，這些小圖片可能也就是十幾K大甚至1K都不到，假如咱們的一個頁面有一百個小圖標，咱們在加載頁面時，就要發送100個HTTP請求，若是你的網站訪問量很大併發量也很高，假如上百萬訪問量，那發起的請求就是千萬級別了，服務器是有必定的壓力的，而且一個用戶的一個頁面要發起那麼多請求，是很耗時的。併發

因此，咱們優化的方案就是：將這些十幾K、幾K的小圖標合併在一張圖片裏，而後用CSS的background-image和background-position屬性來定位要顯示的部分。前端優化

2、css sprites佈局

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

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

3、具體代碼網站

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <style type="text/css">
            ul{padding: 0; margin: 0; border: red solid 1px; }
            ul li{list-style: none;  }
            ul li a{
                background: url(img/ico.png) no-repeat; 
                width:17px;padding-top:5px;height:15px; float:left; overflow:hidden;}
            ul li:nth-of-type(1) a{background-position: -62px -35px;}
            ul li:nth-of-type(2) a{background-position: -86px -35px;}
            /*背景background-position有兩個數值，前一個表明靠左距離值，第二個數值表明靠上距離值*/
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a ></a>Word文章標題
            </li>
            <li>
                <a ></a>PPT文章標題
            </li>
        </ul>
    </body>
</html>

顯示效果：

參考：http://www.divcss5.com/rumen/r767.shtml

1. css sprite
2. CSS Sprite
3. CSS sprite
4. CSS Sprite（CSS貼圖）
5. css sprite合併
6. CSS sprite使用
7. CSS Sprite實例
8. Css Sprite Demo
9. CSS Sprite 圖標
10. css sprite實例
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

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