CSS спрайты: как несколько изображений объединить в один файл

Объединив несколько маленьких изображений одной формы, которые используются на каждой странице сайта, мы ускорим загрузку за счёт уменьшения HTTP-запросов.

Делаем общую картинку.

Её можно создать как с использованием специальных сервисов, так и применяя Фотошоп. Вот изображения: одно использует Google, второе сделала я для shpargalkablog.ru.

Определение стиля CSS свойством background-position.

Для платформы Blogger до ]]></b:skin> (аналог </style>) зададим свойства классу:

span.avatar1, span.avatar2, span.avatar3 {
  background: url(http://4.bp.blogspot.com/-2Gl2trxnFEY/TeTh7mNHPrI/AAAAAAAAB7g/bWYTwnhwQDc/s1600/shpargalkablog.png) no-repeat 0 0;
  width: 32px;
  height: 32px;
  display: block;
  float: left;
}
 
span.avatar2 {background-position: 0 -32px;}
 
span.avatar3 {background-position: -152px 0;}

http://4.bp.blogspot.com/-2Gl2trxnFEY/TeTh7mNHPrI/AAAAAAAAB7g/bWYTwnhwQDc/s1600/shpargalkablog.png	адрес спрайта (см. картинка выше);
width и height	соответственно ширина и высота того элемента, который мы хотим показать, но не всего спрайта;
background-position: 0 -32px;	показывает, что мы делаем отступ на общей картинке на 32px вниз - это размер предыдущего изображения.

HTML код.

Здесь всё очень просто:

<span class="avatar1">&nbsp;</span> 
<span class="avatar2">&nbsp;</span> 
<span class="avatar3">&nbsp;</span>

Итог:

Изменение картинки при наведении мышки.

Если задать псевдокласс :hover, то рисунок будет изменяться динамически при наведении на него курсором.

<style type="text/css">
span.avatar {
  background: url(http://4.bp.blogspot.com/-2Gl2trxnFEY/TeTh7mNHPrI/AAAAAAAAB7g/bWYTwnhwQDc/s1600/shpargalkablog.png) no-repeat 0 0;
  width: 32px;
  height: 32px;
  display: block;
  float: left;
}
 
span.avatar:hover {background-position: 0 -32px;}
</style>

<span class="avatar">&nbsp;</span>

наверх ↑

4 комментария:

Анонимный: Я новичок, очень прошу помочь! Мне нужно ускорить загрузку сайта, Page Speed пишет:"Объедините изображение в CSS- спрайты" Уже испробовала все, теперь объединяю с помощью SpriteMe.org, но когда захожу на сайт,почему-то спрайт не создается(нет кнопки для создания спрайта и почему-то работает правильно всего одна ссылка на изображение, хотя изображений много и все правильно в браузере отображаются) Что делать? Буду рада помощи.
NMitra: Даже затрудняюсь вам помочь. Не понятно, что за кнопка, для какого сайта делаете (URL), как выглядит ваша картинка-спрайт.
Александр Зарко: помогите, осталось две ошибки, не могу справиться((( вот такие

.ui-dialog .ui-dialog-content Свойство zoom не существует : 1

.bbcodes Ошибка разбора .bbcodes:hover { background-position:0 -32px;}

Для связи: ale-zarko@yandex.ua
NMitra: Опишите подробнее :) Кто или что пишет об ошибках?