2

私は現在、自分のサイトのcssスプライト画像を使用しています。しかし、私は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）は、必要なすべての画像（yoyrの場合は6つ）をグリッド状の構造で構成した大きな画像（おそらく.png）です。利点は、HTTPリクエスト（画像の数はNどこですか）ではなく、1つのHTTPリクエストのみが必要になることです。n

あなたの問題はCSSスタイリングのように見えます。ただし、スプライトを使用する場合は、背景が透明で幅がx * nのマスターイメージ（sprite.png）が1つ必要です（ここで、質問でX示したように、1つのdiv/カテゴリの幅です。 =数合計画像、ここでは6つ。）の高さは、画像の最も高い画像と同じである必要があります。Desired OutcomeNsprite.png

したがって、上記のように、すべての画像を新しい画像stero.pngにコピーします。books.pngsprite.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 に答える