Question

我目前正在为我的网站使用css精灵图片。但我遇到了CSS样式问题。我有6个类别，每个类别旁边有一个图像。当应用图像精灵时，我得到同一对象的重复图像。

如何通过css＆amp; amp;获取每个类别的相应图像？精灵？如果你想看看下面的实例，那就是链接。（抱歉可怕的html结构）

谢谢

外观如何：

精灵图像： Click Here

个人图片： Click Here

期望的结果：

enter image description 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样式。但是如果你想使用精灵，你需要一个主图像（sprite.png）具有透明背景并且宽度为x * n（其中X =你的一个div / category的宽度，如{{{ 1}}在您的问题中。Desired Outcome =总图像数量，此处为6。）N的高度应该等于图像的最高值。

因此，如上所述，将您的所有图片sprite.png，stero.png复制到新的books.png。

然后您可以使用以下 HTML：

sprite.png

CSS：

<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-->

您还可以使用现有的6张图片来达到理想的效果。只需设置所需的高度，div的宽度。设置#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; }。如果图像小于div的尺寸，则图像将放置在左上角。

修改

好的，看到了你的实况页面代码。您已经在使用精灵文件。

从看到你的background-position:top-left;＆amp; How It looks个页面，看起来像是要在图像的右下方添加额外的空白区域。对？？如果是，您可以在categories.png中添加所需的空格，并在CSS中使用Desired。它会阻止图像在水平方向重复。

CSS Sprite：为几个类别设置精灵图像

1 个答案: