首頁 > 文章 > web前端 > CSS如何使用精靈圖

CSS如何使用精靈圖

醉折花枝作酒筹原創: 2021-04-07 18:06:055933瀏覽

CSS使用精靈圖的方法：先使用background-image屬性匯入精靈圖；然後利用background-repeat:no-repeat設定影像不重複；最後使用background-position屬性設定影像初始位置，進行精確定位。

CSS如何使用精靈圖

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS Sprite是什麼？

CSS Sprite直譯為“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”，是一種網頁圖片應用處理方式。其實就是把多張小圖片整合到一張圖片中去，再利用CSS的“background-image”，“background-repeat”，“background-position 」進行背景定位，background-position可以用數字能精確的定位出背景圖片在佈局盒子物件位置。

優點：

減少網頁http要求，加快頁面載入速度，提升頁面的效能(適合小圖)。
例如頁面上使用到很多icon的圖，如果頁面一張張去請求這些圖片的時後那http請求就會很多，這時候把這些圖片合併為一張的話，頁面就只需要加載一次了，減少了http請求帶來的效能消耗。如下圖：

圖片整合原則：

邊切圖邊整合。
定位時避免使用bottom,right等，用具體的數值，為了避免當你的寬度或高度上擴展sprites圖時出現位置的錯誤。
將小圖示預留足夠的空間，因為使用這些圖示元素通常會有大量的內容而且可能需要擴展的間距，以至於其它的圖片可能會意外出現在本區域內。一般的情況下，會將這些小圖示整合到文件的最右側。
單張整合好的sprite圖片在100KB以內。
依分類整合圖片。
為了方便計算尺寸，一般情況會將sprites圖的座標計算成整數倍。

實作程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sprite精灵图使用</title>
    <style type="text/css">
        ol, ul ,li{list-style:none};
        body, p,  ul, li {margin:0; padding:0;}
        ul li {
            float: left;
            background-color: #63caac;
            color: #fff;
            padding: 5px 10px;
            margin-right: 10px;
        }
        li:hover{background-color:#347764;}
        ul.sprite li span{display: block;}
        ul.sprite li span.l1{background-position:0 0;}
        ul.sprite li span.l2{background-position:-64px 0;}
        ul.sprite li span.l3{background-position:-128px 0;}
        ul.sprite li span.l4{background-position:-192px 0;}
ul.sprite li span{width:64px;padding-top:5px;height:64px;overflow:hidden;background:url(img.png) no-repeat;}
    </style>
</head>
<body>
    <ul class="sprite">
        <li><span class="l1"></span></li>
        <li><span class="l2"></span></li>
        <li><span class="l3"></span></li>
        <li><span class="l4"></span></li>
    </ul>
</body>
</html>

推薦學習：《css影片教學》

以上是CSS如何使用精靈圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 对象 position background http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：常見的css框架有哪些下一篇：常見的css框架有哪些

看更多