Question

我试图将spritesheet用于一堆盒子，我这样做的方式显然多次调用图像（导致spritesheet无用，或实际上更糟）。只是想知道我如何才能更有效地调用图像

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

Answer 1

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

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

应该工作

带有一组div的图像的CSS spritesheet

1 个答案: