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

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

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


Её можно создать как с использованием специальных сервисов, так и применяя Фотошоп. Вот изображения: одно использует Google, второе сделала я для shpargalkablog.ru.
Спрайт 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>
 
в f t
наверх ↑

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
Опишите подробнее :) Кто или что пишет об ошибках?