1

ボックスの束にスプライトシートを使用しようとしていますが、私がやっている方法では明らかに画像を複数回呼び出します(スプライトシートが役に立たないか、実際には悪化します)。画像を一度呼び出すと、これをより効率的にするにはどうすればよいか疑問に思っています

<div class="live-box-outer">
                <div class="live-box contact-highlight" id="phone">

                    <div class="overlay" style="display: none">
                        <h2>
                            Telephone Number</h2>
                        <div class="arrow">
                        </div>
                    </div>
                    <span>Our #</span>
                </div>
            </div>
            <div class="live-box-outer">
                <div class="live-box" id="mobile">
                    <div class="overlay" style="display: none">
                        <h2>
                            text mobile
                            functions</h2>
                        <div class="arrow">
                        </div>
                    </div>
                    <span>Mobile Sites</span>
                </div>
            </div>

そして私のスタイル：（これは単なるサンプルです。約9つのボックスがあります）

   #phone
{
     background-image:url('../img/Mountain.png');
     background-position: 0px 0;
    background-repeat:no-repeat; 
}
#mobile
{

    background-image:url('../img/Mountain.png');
     background-position: 0px -134px;
    background-repeat:no-repeat;
}
4

1 に答える 1

1 
.live-box{
    background-image:url('../img/Mountain.png');
    background-repeat:no-repeat;
}

#phone
{
   background-position: 0px 0; 
}
#mobile
{
   background-position: 0px -134px;
}

動作するはずです

于 2011-10-18T21:32:24.490 に答える