Одна картинка – много картинок

(Проголосуй)

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

Этим приемом пользуются уже достаточно давно, когда точно я сказать не могу, но знаю, что после появления свойства background-position в CSS.

Допустим, что у вас есть четыре стрелки, которые несут функции перемещения по сайту. Две горизонтальные – следующая и предыдущая статья. Две вертикальные – якоря, которые ведут вверх и вниз страницы.

Изначально четыре стрелки – четыре изображения, для которых скорее всего придется создавать папку, чтобы не запутаться. В итоге путь к каждому из изображений будет выглядеть примерно так:
/img/arrows/arrow-01.png

Если-же объединить их в один файл, то путаницы не будет и можно будет закинуть стрелки в корень img с названием «arrows-all.png».

Для этого размещаем стрелки в .png файле примерно таким образом:

Сделать это можно инструментом Move Tool (быстрый вызов клавишей «v»). Советую так-же включить повышенную точность (View → Snap). После этого обрезаете изображение точно по краям инструментом Crop Tool (быстрый вызов клавишей «c»).

Теперь меряем размер одной стрелки на изображении.
Далее чтобы вставить одну из стрелок изображения на сайт пишем следующее:

А в таблице стилей (обычно style.css или stylesheet.css) следующее:

Позиция фона указывается двумя значениями. Первое – по горизонтали, второе – по вертикали. В моем примере я указал значение -105px и 0px, что означает то, что будет показана вторая стрелка:

Таким образом вы экономит свои силы. Представьте, что у вас не 10-20 файлов в папке img а несколько сотен. Например, если это пункты меню, то их проще объединить по этой инструкции.