Как сделать CSS-спрайт, который управляет несколькими фоновыми изображениями для нескольких DIV?

Всем привет!

У меня есть сайт, который является http://www.urbanelementz.ca ... В настоящее время он находится в разработке.

Пожалуйста, обратите внимание, что я довольно хорошо знаком с CSS-спрайтами и могу создавать спрайты наведения/опрокидывания мыши, а также статические изображения. Я использую около 7 или 8 основных спрайтов на своем веб-сайте, которые управляют большинством изображений и несколькими переключениями мыши (такими как меню и т. д.).

Мой вопрос: у меня есть около 8-10 DIV, которые используют фон изображения. На данный момент каждый div имеет свое собственное фоновое изображение. Либо я упускаю что-то очень простое, либо я просто в тупике, потому что не могу правильно закодировать его для работы.

Моя проблема: я знаю, как сделать спрайт, я знаю, как связать со спрайтом, но когда вы используете опцию" background-position: 0px 0px", она переместит фоновое изображение в DIV, а не фоновое положение на изображении, чтобы показать правильный спрайт.

Вы можете просмотреть мой CSS файл здесь: http://www.urbanelementz.ca/css/style.css Обратите внимание, что он не полностью организован или оптимизирован в данный момент, потому что я делаю изменения.

Пожалуйста, взгляните на CSS-спрайты, которые все расположены внизу и имеют комментарии, чтобы вы могли видеть, какие из них есть.

Я упускаю что-то очевидное? Может быть, я недосыпаю. =0)

Если кто-то может указать мне на учебник или просто вставить правильное кодирование и описание того, как это сделать это, это было бы здорово.

Большое спасибо!

1 2
css css3 css-sprites

1 ответ:

Согласно вашему комментарию, ниже приводится содержание скрипки, которую я создал: 

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

div {
    width: 100px;
    height: 20px;
    border: 1px solid #aaa;
    margin-bottom: 5px;
    background-image: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#one {
  background-position: -15px 0;
}
#two {
  background-position: -15px -27px;
}
#three {
  background-position: -15px -54px;
}
#four {
  background-position: -15px -81px;
}
#five {
  background-position: -15px -108px;
}

Http://jsfiddle.net/TFwdB/

2