Затем отдельные графики можно отобразить, разместив их в качестве фонового изображения в нужном месте.
Это звучит сложно и требует много тонкой работы. Это было бы возможно без следующих полезных инструментов:
Оптимизировать сайт: Если вы хотите добавить CSS-спрайты на существующий веб-сайт (что я всем рекомендую), вам может помочь инструмент SpriteMe.
Просто зайдите на сайт spriteme.org и перетащите показанную там ссылку на панель закладок вашего браузера. Теперь вы можете получить доступ к инструменту, нажав на ссылку.
Затем он анализирует открытый в данный момент веб-сайт и предлагает комбинацию спрайтов, которую можно напрямую загрузить в виде готовой графики.
SpriteMe также генерирует соответствующий CSS-код, который вам просто нужно интегрировать на свой веб-сайт вместе с графикой.
Спрайтовая графика из отдельной графики: Чтобы автоматически генерировать графику-спрайт + код CSS из отдельной графики, просто загрузите свою графику в виде ZIP-пакета в генератор спрайтов CSS. Инструмент сделает все остальное.
Создайте CSS из спрайтовой графики: Если вы уже создали спрайт самостоятельно и теперь хотите, чтобы соответствующий код CSS обрабатывал отдельные изображения, вы можете использовать Sprite Cow.
Туда вы загружаете графику, выбираете отдельные элементы и отображается CSS-код.
