CSS Sprite：爲幾個類別設置精靈圖像

Question

我目前正在爲我的網站使用css精靈圖像。但我遇到了CSS樣式問題。我有6個類別，每個類別旁邊都有一個圖片。當應用圖像精靈時，我得到了同一個對象的重複圖像。

如何通過css & sprite獲取每個類別的各自圖像？如果你喜歡看活生生的實例下面是鏈接（可怕的HTML結構PS對不起）

謝謝

它的外觀：

雪碧圖片：Click Here

個人圖片：Click Here

期望的結果：

CSS部分相關

<style> 

    #index_categories { 
     background: #fff; 
     float: left; 
     width: 255px; 
     height: 125px; 
     margin: 10px 15px 10px 40px; 
     padding: 5px; 
     font-size: 97%; 
     vertical-align: middle; 
     background: url(http://webprolearner2346.zxq.net/css-test/images/categories.png) no-repeat top left; 
    } 
    .index_thumb { 
     padding: 5px; 
    } 


    .index_categories_list { 
     text-indent: 5px; 
     padding-left: 10px; 
    } 
    .index_cat { 
     list-style-type: none; 
    } 
    #listing { 
     background: #fff; 
     width: 95%; 
     height: 115px; 
     padding: 10px; 
     margin-bottom: 10px; 
     margin-right: 5px; 
     margin-left: 5px; 
     margin-top: 5px; 
    } 
    .listing_pic { 
     float: left; 
     padding: 10px; 
    } 
    #whitebox { 
     background: #fff; 
     width: 95%; 
     min-height: 200px; 
     padding: 10px; 
     margin-bottom: 10px; 
     margin-right: 5px; 
     margin-left: 5px; 
     margin-top: 5px; 
    } 

    .sprite-books{ background-position: 0 0; width: 87px; height: 87px; } 
    .sprite-tshirt{ background-position: 0 -137px; width: 87px; height: 87px; } 
    .sprite-stereo{ background-position: 0 -274px; width: 83px; height: 83px; } 
    .sprite-chair{ background-position: 0 -407px; width: 87px; height: 87px; } 
    .sprite-key{ background-position: 0 -544px; width: 83px; height: 83px; } 
    .sprite-cake{ background-position: 0 -677px; width: 87px; height: 87px; } 
    </style> 

HTML代碼段

<div class="contentPost" style="height:900px;"> 
<div id="index_categories" class="sprite-books"> 
    <h3><a class="frontLinks" href="#">Category 1</a></h3> 
    <ul class="index_cat"> 
     <li><a href="#">Books</a></li> 
    </ul> 
</div> 
<div id="index_categories " class="sprite-stereo"> 
    <h3><a class="frontLinks" href="#">Category 2</a></h3> 
    <ul class="index_cat"> 
      <li><a href="#">Stereo</a></li> 
    </ul> 
    </div> 
    <div id="index_categories" class="sprite-chair"> 
    <h3><a class="frontLinks" href="#">Category 3</a></h3> 
    <ul class="index_cat"> 
     <li><a href="#">Chair</a></li> 
    </ul> 
    </div> 
</div> 

Answer 1

CSS Sprite (Google)是一個大的圖像（最有可能.png格式）由所有你需要的圖像（在yoyr情況下6），在一個網格狀結構。好處是您只需要一個HTTP請求而不需要N HTTP請求（其中n是您的圖像數量）。

您的問題看起來像CSS樣式。但是如果你想使用精靈，你需要一個具有透明背景並且寬度爲x * n的主圖像（sprite.png）（其中X =你的一個div /類別的寬度，如你在Desired Outcome中顯示的那樣）N =總圖像數，這裏是6）。sprite.png的高度應該等於圖像中最高的圖像。

因此，如上所述，將所有圖像stero.png,books.png複製到新的sprite.png。

那麼你可以使用以下HTML：

<div id="wrapper"> 
    <div class="row"> 
     <div id="books" class="cell"> 
     </div><!--//books--> 
     <div id="stereo" class="cell"> 
     </div><!--//stereo--> 
     <div id="pen" class="cell"> 
     </div><!--//pen--> 
    </div><!--//row--> 
    <div class="row"> 
     <div id="mag" class="cell"> 
     </div><!--//mag--> 
     <div id="bag" class="cell"> 
     </div><!--//bag--> 
     <div id="paper" class="cell"> 
     </div><!--//paper--> 
    </div><!--//row--> 
</div><!--//wrapper--> 

CSS：

#wrapper{ 
    margin: 5px auto; // to center the div on page 
    width: 80%; 
} 
.row{ //stack'em in 3x2 grid 
    clear:both; 
} 
.cell{ 
    background-color: #fefefe; 
    background-url: images/sprite.png; //Set common background UR 
    float: left;      //stack each other to left 
    height: 15px;      //desired height 
    width: 30px;      //desired width 
    border: 3px solid #c3c3c3;   //set border 
} 

//set specific background-position for each div 
//(Remember we are using same image for all these divs? 
#books{ background-position: -0px -0px; } //image starts at top:0, left:0px 
#stereo{ background-position: -0px -30px; } //image starts at top:0, left:30px 
#pen{ background-position: -0px -60px; } //image starts at top:0, left:60px 
#mag{ background-position: -0px -90px; } 
#bag{ background-position: -0px -120px; } 
#paper{ background-position: -0px -150px; } 

你也可以使用現有的6幅以達到您想要的結果。只需設置div的所需高度，寬度即可。設置background-position:top-left;。如果圖像小於div的尺寸，圖像將放置在左上角。

編輯：

好了，看到你的活頁的代碼。你已經在使用一個精靈文件。

看到您的How It looks & Desired頁面，看起來像要在圖像的右下方添加額外的空白區域。對？？如果是，您可以在categories.png中添加所需的空格，並在CSS中使用background-position:top-left;。這將防止圖像在水平方向重複。