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