代码之家 › 专栏 › 技术社区 › user1434156

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

css-sprites css

user1434156 · 技术社区 · 14 年前

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

如何通过css&(传说中的)精灵如果你喜欢看下面的实例链接。(ps对糟糕的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>

1 回复 | 直到 14 年前

DavChana 14 年前

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 变成一个新的 精灵.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的高度、宽度。set background-position:top-left; 。如果图像小于div的尺寸,则图像将放置在左上角。

编辑:

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

从看到你的 How It looks & Desired 页面,看起来你想在图像的右下角添加额外的空白。正确的如果是,您可以在categories.png中添加所需的空白,然后使用 背景位置:左上角; 在CSS中。这将防止图像在水平面上重复。