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

background-position

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

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

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

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

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

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

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

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

<a>
<div id=arrow></div>
</a>

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


#arrow {
width: 105px; /* Т.к. ширина моей стрелки 105px */
height: 105px;  /* Т.к. высота моей стрелки 105px */
background-image: url(‘arrows-all.png’); /* Тут пишем адрес картинки */
background-position: -105px 0px; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}

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

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

Понравилась статья? Подпишись на RSS по Email!

Заранее благодарен за добавление статьи в

Читайте также:
Запись опубликована в рубрике Web-дизайн с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*