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;。这将防止图像在水平方向重复。