Введение в статью Wulin.com (www.vevb.com): CSS Sprite, иногда называемый Sprite и Elf Picture, является проблемой, с которой встречаются каждый передний открытие, а также является общим методом оптимизации нагрузки с малой картиной. Я считаю, что все студенты знают принцип, поэтому я не буду вдаваться в подробности.
Спрайт CSS, иногда называемый спрайтом и спрайтом, является проблемой, которую открывает каждый фронт-конечный, а также является общим методом оптимизации нагрузки с небольшим изображением. Я считаю, что все студенты знают принцип, поэтому я не буду вдаваться в подробности.
Я всегда мотивировал использовать HTML5, чтобы реализовать инструмент для синтеза снимков спрайта, который облегчает быстрое развитие небольших проектов и снижает некоторые механические труды, такие как открытие Photoshop, фейерверки и другие инструменты для сочетания фотографий. Недавно я наконец потратил время на то, чтобы зачать и реализовать его.
Go! PNG Введение:Текущие функции следующие:
Инструкции для использования: 1. Перетащите и бросайте файл небольшого изображения в область работы, как показано ниже: 2. Настройки атрибута класса ввода и целевое изображение и генерация файлов CSS, как показано на рисунке ниже 3. Сгенерированный файл CSS можно настроить путем изменения шаблона CSS.Используемая функция шаблона-это микроэлемент Джона Ресига.
Переменные, которые можно использовать:
Объяснения X, Y, W и H следующие:
Настройки шаблона CSS следующие:
4. После генерации целевых изображений и CSS вы можете загрузить их напрямуюНажмите кнопку загрузки, чтобы завершить загрузку:
5. Экспорт рабочего статусаЭта функция может экспортировать ваше текущее рабочее состояние, включая данные изображения (изображения, расположение расположения изображения), настройки параметров (включая настройки параметров домашней страницы и настройки шаблона CSS), в один файл, и вы можете восстановить свой рабочий статус в следующий раз, используя этот файл.
Экспортируйте следующий рисунок:
Импортируйте следующее рисунок:
Можно восстановить: