Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Проблема со спрайтом

Проблема со спрайтом


     10.08.2013    Стили (CSS)    1253

вопрос
Здравствуйте! У меня есть фон сайта (60x60, повторяется). Есть еще фон верхней навигации и фон сайдбаров. Все три картинки 60x60px. Объединяю в спрайты по горизонтали, без отступов. Как правильно прописать background-position.

Ответил: Sander


Спрайты применимы только для иконок и для заливки по горизонтали или вертикали.
Посредством четко заданных размеров формы и background-position можно четко задать фон для блока.

Пример, заливка фона кнопок, по горизонтали:
Проблема со спрайтом

Тут используются стили:
.aqua{background-position:0 0;}
    .aqua:hover{background-position:0 -28px;}
.blue{background-position:0 -56px;}
    .blue:hover{background-position:0 -84px;}


Пример 2, иконки:
Проблема со спрайтом

.orating_m{background-position:-12px 0;}
    .orating_m:hover{background-position:-12px -12px;}
    .orating_m.orated{background-position:-12px -24px;}
.orating_p{background-position:0 0;}
    .orating_p:hover{background-position:0 -12px;}
    .orating_p.orated{background-position:0 -24px;}


А вообще, RTFM
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы