CSS Sprite Вопрос - PullRequest
Новая
       1

CSS Sprite Вопрос

0 голосов
/ 23 июня 2011

Меня попросили добавить новую ссылку на существующий CSS Sprite.

Я приложил базовое представление макета изображения.

Here's the sprite image
Из отрисованного вывода видно, что разметка выглядит примерно так: 

<div>
  <ul id="pcnatabs">
    <li id="liTab1"></li>
    <li id="liTab2">
      <a href="#" id="tab2" class="active">one</a>
    </li>
    <li id="liTab3">
      <a href="#" id="tab3">two</a>
    </li>
    <li id="liTab4">
      <a href="#" id="tab4">three</a>
    </li>
    <li id="liTab5">
      <a href="#" id="tab5">four</a>
    </li>
  </ul>
</div>

Существует какой-то существующий CSS, который используется, однако, когда я изменил изображение, добавив пятую ссылку, мне не очень повезло, чтобы заставить его работать должным образом. Поскольку я раньше не делал спрайт css, я думаю, что лучше всего сделать это сверху вниз, пошагово и начать с квадрата 1. Кто-нибудь может подсказать, с чего мне начать?

1 Ответ

0 голосов
/ 23 июня 2011

Если это спрайт изображения, они должны использовать один и тот же фоновый рисунок, верно?

Тогда вам нужно только назначить то же фоновое изображение, что и у других, ту же ширину и высоту, что и у display: block, и просто изменить положение фона изображения.

Поскольку чем больше ссылок у вас есть, тем шире изображение, вероятно, вам следует присвоить этой новой ссылке отрицательную фоновую позицию вдоль оси x.

...