2

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

如何通过 css 和 sprite 获取每个类别及其各自的图像？如果您想查看下面的实时示例，请查看链接。（对于可怕的 html 结构感到抱歉）

谢谢

它的外观：

精灵图片： 点击这里

个别图片： 点击这里

期望的结果：

在此处输入图像描述

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

1 回答 1

1

CSS Sprite (Google)是一个大图像（很可能是 .png），由您需要的所有图像（在 yoyr 的情况下为 6 个）组成，采用网格状结构。好处是您将只需要一个 HTTP 请求而不是NHTTP 请求（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 中添加所需的空白并background-position:top-left;在 CSS 中使用。它将防止图像在水平侧重复。

于 2012-08-11T10:49:45.887 回答