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

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

2 голосов
/ 19 июня 2011

Привет всем!

У меня есть веб-сайт, который 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 голосов
/ 19 июня 2011

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

<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/

...