CSS從大圖片上截取小圖標的操做_CSS精靈

1.編程思想在於：

         使用background-position屬性（設置背景圖像的起始位置）。這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像若是要重複，將從這一點開始。

2.CSS基礎介紹：

1.如何定位背景圖像：
body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

2.background-position可能的值

值	描述
top left center right	若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。默認爲 0% 0%
x% y%	第一個值是水平位置，第二個值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;若是您僅規定了一個值，另外一個值將是 50%。
xpos ypos	第一個值是水平位置，第二個值是垂直位置;左上角是 0 0。單位是像素 (0px 0px) 或任何其餘的 CSS 單位;若是您僅規定了一個值，另外一個值將是50%;能夠混合使用 % 和 position 值。

3.實際案例

注：圖片名稱（tabicons.png）每一個小圖標width:18px;height:18px從左上角座標爲（-0px;-0px;）;例如第一個對號的座標爲(-0px;-0px;)第二個加號的圖標爲(-20px;-0px;)中間依次加20個像素

3.1截取小圖表的CSS代碼以下：

.icon
{
    background: url(imges/tabicons.png) no-repeat;
    width: 18px;
    line-height: 18px;
    display: inline-block;
}
.icon-set
{
 background-position: -380px -200px;
}

.icon-add
{
 background-position: -20px 0px;
}

3.2調用該樣式：

<div class="icon icon-add">
     test

</div>

<br />