带有一组div的图像的CSS精灵表

我试着用一张精灵纸来处理一堆盒子，我这样做的方式显然多次调用图像（导致精灵纸无用，或者更糟）。我只是想知道如何才能让这个更有效地调用图像一次

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

应该有用

应该有用

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

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

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