我正在尝试为一堆盒子使用 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>
还有我的风格:(这只是一个 sample ,我有大约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;
}
最佳答案
.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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7813964/