我试图为一堆盒子使用精灵表,我这样做的方式显然多次调用图像(导致精灵表无用,或者实际上更糟)。只是想知道如何才能更有效地调用一次图像
<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;
}