CSS spritesheet для изображений с группой элементов div - PullRequest
Новая
       4

CSS spritesheet для изображений с группой элементов div

1 голос
/ 19 октября 2011

Я пытаюсь использовать таблицу спрайтов для набора блоков, способ, которым я это делаю, явно вызывает изображение несколько раз (в результате чего таблица спрайтов становится бесполезной или даже хуже). Просто интересно, как я могу сделать это более эффективным, вызывая изображение один раз 

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

1 Ответ

1 голос
/ 19 октября 2011 
.live-box{
    background-image:url('../img/Mountain.png');
    background-repeat:no-repeat;
}

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

Должно работать

...