CSS精靈（css sprites）實做練習

網站SEO過程中有個步驟要加快網站載入速度的方式，作用原理其實是讓細小檔案變成單一圖檔，就是目前應用相當廣的[css精靈]方式，許多大型網站也都有用到，實做方式相當簡單，我們用幾個步驟來簡單說明：
首先，要準備小圖的圖片堆疊，像是這樣：

 把這張圖轉出放置到資料夾內：

再來就是準備要用上哪張圖片的定位方式，以下我用ps說明：
1.先找到圖片的長寬
按住Ctrl鍵點下該圖片的圖層，圖片會被選取起來


在[資訊面板]裡可以看到圖片的大小是


2.選單：編輯/任意變形(Ctrl+T)
此時在[資訊面板]的控制列會出現這張小圖的位置資訊，這樣一來我們就可以在網站裡利用css取用這張圖了！


接下來就是運用css讓他呈現：
假設你要把這圖當成圖形用：

span.pic0001{
    background: url(../img/css-dot-1.png) 0px -65px; /*加上座標*/
    width: 70px;   /*寬*/
    height: 25px;  /*高*/
    display: inline-block;  /*把span更改成「行內區塊」模式*/
    vertical-align: middle;  /*垂直居中，依照實際排列方式使用*/
    text-ident: -9000px;  /*讓內部文字不見*/
}

取用的方式：

<span class="pic0001">圖片1</span>  <!--"圖片1"建議要加上去，比較好識別！-->

如果是要當成按鈕的：

a.bt001{
    background: url(../img/css-dot-1.png) 0px -65px; /*加上座標*/
    width: 70px;   /*寬*/
    height: 25px;  /*高*/
    display: inline-block;  /*把a更改成「行內區塊」模式*/
    vertical-align: middle;  /*垂直居中*/
    text-align: center;  /*按鈕內文字居中*/
    color: #fff;  /*文字顏色*/
    font-size: 0.8em;
    line-height: 25px;   /*讓文字垂直也居中*/
    text-shadow: 0px 0px 2px #333;  /*文字加上陰影*/
}

取用的方式：

<a href="http://www.....tw" class="bt001">送出</a>

按鈕加上浮起效果，可以加上這段：

a.bt001:hover{
    background-position: 0px -90px;  /*更改圖片位置*/
}