CSS Sprites的詳細使用步驟

時間 2020-05-10

標籤 css sprites 詳細使用步驟欄目 CSS 简体版

原文原文鏈接

1、把小圖放在一張大圖中，先排版好。上幾張圖看看，就好比這個：css

谷歌：html

淘寶：佈局

土豆右下角懸浮框：性能

一、把用到的小圖都放到了一張大圖裏，其中的小圖之間的排版是有點規律的，好比說淘寶那張，相似的小圖放置成同一列，這樣就計算小圖顯示位置的時候，只要知道第一個小圖的位置，同一列的小圖，left（X座標）同樣，只須要改top（Y座標）。這樣就方便了許多。學習

2、使用大圖。網站

在哪一個位置須要使用這個小圖，就把大圖做爲background-images插入。而後來根據這個小圖的大小調整left 和top。url

用到的css屬性是background-image、background-position、background-repeat、這幾個屬性。spa

或者使用background這個複合屬性寫在一塊兒就好。code

3、個人第一個demo，我必定要實現這樣的效果htm

我先上張圖說明我要作什麼:

這個例子的意義是讓我明白要怎麼去顯示想要的小圖，沒有其餘的意義了哈哈。

個人思路是，ul li內內嵌一個<div></div>（固然li是塊級元素）。

詳細的佈局代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    ul.ul1
    {
        width:200px;
        height:200px;
        
    }
    ul.ul1 li
    {
        height:40px;
        
    }
    .star
    {
        width:30px;
        height:18px;
        border:1px solid black;
        display:inline-block;                   /*將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞*/  /*這裏使用是爲了div跟li能不使用float屬性處在同一行，最後div和li對其是用到inline-block屬性*/
        vertical-align:top;
        
        background-image:url(images/minibar.png);                /*顯示小圖*/
        background-repeat:none;
        background-position:2px -55px;
    }
    .num9
    {
        width:30px;
        height:18px;
        border:1px solid black;
        display:inline-block;
        vertical-align:top;
        
        background-image:url(images/minibar.png);                /*顯示小圖*/
        background-repeat:none;
        background-position:-205px -20px;
    }
    </style>
</head>
<body>
<ul class="ul1">
    <li>項目一<div class="star"></div></li>
    <li>項目一<div class="num9"></div></li>
    <li>項目一</li>
    <li>項目一</li>
</ul>
</body>
</html>

小圖完整出來了。

心得：

一、書寫background-position時通常都是負值，由於是從大圖的左上角做爲（0,0）點。

二、以前沒有學習css sprite以前，是想着怎麼把一張大圖不要的部分怎麼遮擋掉。如今明白了是怎麼回事。好比我上面要顯示那朵小云，把大圖放進div中，而後設置這個div的width和height，再定位一下background-position的位置。最後，大圖就只在div中顯示咱們須要的一小部分。

三、我還要深刻學習要怎麼把小圖排版好成一個大圖，更容易測量位置，且不互相干擾。

3、爲何要使用CSS Sprites

減小HTTP請求次數，從而提升了網站性能。

由於假設有6個小圖，就有6個HTTP請求，可是若是是放在一個大圖裏，就只須要1次，由於你要的6個小圖都在一張大圖裏，請求一次後不用再次發送HTTP請求去請求圖片資源。