CSS Sprites+CSS3 Icon Font

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> CSS Sprites+CSS3 Icon Font

編輯：HTML5詳解

CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。根據具體圖標在大圖上的位置，給背景定位。

CSS Sprites加速的關鍵，不是降低質量，而是減少個數。

做成Sprites的很大的原因是圖片流量大，想象一下，如果將一些小圖片做成字體模式進行顯示，會不會很神奇呢？隨著CSS3對字體樣式的不斷豐富，即便在中文網頁中對font-face賦於了新的應用場景，那就是用Icon Font代替頁面中的圖片。現在通常所指的Icon Font，是用字體文件取代圖片文件，來展示圖標、特殊字體等元素的方法。

使用字體來實現圖標就有很多優勢：字體文件小，一般20-50kb；矢量性，在不同的分辨率屏幕上適配縮放不失真；容易編輯和維護，尺寸和顏色可以用 CSS來控制，可以添加一些視覺效果如：陰影、旋轉、透明度；透明完全兼容IE6；還不用為sprite icon中的inline-block的兼容性煩惱等等。

由於是字體，所以只支持圖片上是純色的，多種顏色的就不支持了；而且很多圖片的效果Icon Font很難很好的實現，所以將二者結合是現在很多公司的做法，如：APPLE、淘寶等。

一.CSS Sprites

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。

1.制作CSS Sprites圖片：

1）.制圖工具

專業制圖包括Photoshop、Fireworks等，這裡不再敘述如何制作。

還有一些制作Sprites圖片的網站，如：http://CSS.spritegen.com/。直接上傳需要組合的圖片，自動組合，並生成代碼；但不能根據自己的需要更改圖片的位置。

2).制圖的思想

CSS Sprites 技術要點總結：

1）. 小圖片整合時，按照從上到下的順序，而不要從左到右排列。

這樣排列 background-position 的值一目了然，寫 CSS 時方便許多。同時也是為了後期維護著想。想象一下，如果後期維護時，修改其中某個圖片的尺寸，那麼周圍的所有元素的background- position 就會隨之改變，這將會是一件很頭疼的事情。

2）. 小圖片整合時盡量靠最左邊戒者最右邊。

這兩個位置很靈活，非常適合擺放文本前的 icon，再寫樣式時不會受到其它 CSS Sprites 圖片干預。綜合第 1 點，我們可以沿著最左邊和最右邊的兩側開始由上至下整合圖片。

3）. 不建議在不同小圖片上下留間隔。

因為這樣會導致圖片 size 增大從而增加文件的大小。當然，也要給每個圖片足夠的空間，因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴展的間距，以至於其它圖片不會意外出現。

4）.圖片對等合並

應用CSS Sprites圖片時，適當地把對等相同的圖像合並，以節省空間及減少體積。

5）. 把圖片中顏色較近戒相同的組合在一起可以降低顏色數

少色數的圖片文件體積會相對的小。

6）.在Sprites中把圖片放在它要顯示的地方的相對的位置

如果我們希望一個圖片出現在一個元素的左側，將那個圖片放到 sprite 圖片的右邊，如圖

這樣的話，當你通過CSS 移劢背景圖片的位置的時候，基本上不會有其它的圖片出現在它的附近。

7）. background-position定位時避免使用 bottom 或 right 等

使用像素的位置來，當增加或變更圖片元素時不用修改。

8）.圖片優化：將圖片轉成 png8 格式

圖片體積及尺寸方面，建議體積保持在100K以內，size為800px(最佳尺寸)。

2.使用CSS Sprites

源代碼下載：https://github.com/cnblogs-/CSS-sprites-demo

使用CSS Sprites建立demo示例，效果如下：

1）Sprites文件

slice

2）實現代碼：

新建demo.Html，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片demo</title>
    <link rel="stylesheet" type="text/css" href="style/basic.css">
</head>
<body>

    <div id="header">理解切片</div>
    
    <div id="slice">
    <h1><a href="###">更多</a></h1>
    <div>
        <h2>CSS Sprites + CSS3 Icon Font</h2>
        <dl>
            <dt><img src=/School/UploadFiles_7810/201603/20160313124540183.jpg" alt="CSS Sprites+CSS3 Icon Font" /></dt>
            <dd>CSS Sprites<br>CSS3 Icon Font</dd>
        </dl>
        <ul>
            <li><em>[02-08]</em>制作CSS Sprites圖片 </li>
            <li><em>[02-08]</em>使用CSS Sprites </li>
            <li><em>[02-08]</em>什麼是Icon Font </li>
            <li><em>[02-08]</em>如制作Icon Font </li>
            <li><em>[02-08]</em>如何使用Icon Font（依據Iconfont） </li>
        </ul>
    </div>
</div>
    
</body>
</Html>

建立basic.CSS，代碼如下：

* {
    padding:0;
    margin:0;
}
body {
    font-size:12px;
    background:#fff;
}
#header {
    font-size:30px;
    font-weight:bold;
    text-align:center;
    margin:30px;
}
#slice {
    width:400px;
    height:415px;
    background:url(../images/slice.gif) no-repeat -454px 53px;
    margin:0 auto;
}
#slice h1 {
    font-size:12px;
    width:400px;
    height:42px;
    background:url(../images/slice.gif) no-repeat -454px -13px;
    padding-top:7px;
}
#slice h1 a {
    width:45px;
    height:23px;
    display:block;
    margin-left:auto;
    background:url(../images/slice.gif) no-repeat -798px -230px;
    text-align:center;
    line-height:23px;
    color:#fff;
    font-size:12px;
    text-decoration:none;
    margin-right:9px;
}
#slice div {
    width:400px;
    height:340px;
    background:#fff url(../images/slice.gif) no-repeat -32px -14px;
    padding-top:10px;
}
#slice div h2 {
    width:371px;
    height:31px;
    background:#fff url(../images/slice.gif) no-repeat -466px -91px;
    font-size:12px;
    margin:0 auto;
    text-align:center;
    line-height:31px;
    color:#fff;
    margin-bottom:10px;
}
#slice div dl {
    width:137px;
    height:144px;
    background:#fff url(../images/slice.gif) no-repeat -495px -171px;
    margin:0 auto;
    padding-top:8px;
}
#slice div dl dt {
    width:121px;
    height:108px;
    background:#fff url(../images/slice.gif) no-repeat -658px -189px;
    margin:0 auto;
}
#slice div dl dt img {
    width:119px;
    height:91px;
    display:block;
    margin:0 auto;
    padding-top:1px;
}
#slice div dl dd {
    text-align:center;
    padding:4px 4px 0 4px;
    color:#fff;
}
#slice div ul {
    list-style-type:none;
    width:90%;
    margin:10px auto;
    line-height:200%;
    color:#666;
}
#slice div ul li {
    padding-left:15px;
    border-bottom:1px dashed #666;
    background:#fff url(../images/slice.gif) no-repeat -456px -140px;
}
#slice div ul li em {
    float:right;
    font-style:normal;
}

3.CSS Sprites使用分析

1）網易163郵箱登陸

163

163的Sprites文件

clipboard[4]

登陸的Html代碼：

<div class="loginFormBtn">
<button id="loginBtn" class="btn btn-main btn-login" type="submit" tabindex="6">登  錄</button>
<a id="lfBtnReg" class="btn btn-side btn-reg" tabindex="7" target="_blank" href="http://reg.email.163.com/mailregAll/reg0.JSP?from=163mail_right">注  冊</a>
</div>

登陸引用Sprites圖片的CSS代碼:

.themeCtrla, .loginFormIpt, .headerIntro, .verify-input-line, .themeText li, .btn, .btn-moblogin, .ico, .locationTestTitle, .verSelected, .servSelected, .locationTestTitleClose, #extText li, #mobtips_arr, #mobtips_close {
background-image: url("/web/UploadPic/2015-3/201531723653187.png");
}

2）淘寶

taobao的Sprites文件