具有一组 div 的图像的 CSS spritesheet

标签 css performance sprite-sheet

我正在尝试为一堆盒子使用 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/

相关文章:

ios - 重新启动场景时崩溃

css - 如何通过悬停或单击制作 'active' 导航图标?

javascript - jQuery 动画 scrollTop 问题

Java:创建大量新对象

java - 用 Java 将非常小的字符串写入文件的最快方法是什么?

css - 用作背景图像时如何缩放 CSS Sprite ?

html - CSS 打印 - 大段落未跨页拆分

javascript - 当用户使用 jquery 不断单击按钮时需要 append html 元素

php - 如何使用 php 获得像 Google 一样的速度?

video - 透明.mov视频转换成具有透明背景ffmpeg的png序列