Vá!

Artigo Introdução de wulin.com (www.vevb.com): CSS Sprite, às vezes chamado de sprite e elf, é um problema que todos os encontros de abertura do front-end e também são um método comum de otimização de carga de imagem pequena. Acredito que todos os alunos conhecem o princípio, então não vou entrar em detalhes.

O CSS Sprite, às vezes chamado Sprite e Sprite, é um problema que todo front-end abre e também é um método comum de otimização de carga de imagem pequena. Acredito que todos os alunos conhecem o princípio, então não vou entrar em detalhes.

Sempre fui motivado a usar o HTML5 para realizar uma ferramenta para sintetizar o Sprite Pictures, o que facilita o rápido desenvolvimento de pequenos projetos e reduz algum trabalho mecânico, como abrir o Photoshop, fogos de artifício e outras ferramentas para combinar imagens. Recentemente, finalmente tirei um tempo para concebê -lo e implementá -lo.

Vá! PNG Introdução:

As funções atuais são as seguintes:

Instruções para uso: 1. Arraste e solte o pequeno arquivo de imagem na área de operação, como mostrado abaixo:

2. Configurações de atributo da classe de entrada e imagem de destino e geração de arquivos CSS, como mostrado na figura abaixo

3. O arquivo CSS gerado pode ser personalizado alterando o modelo CSS.

A função de modelo usada é a micro-temperatura de John Resig.

As variáveis ​​que podem ser usadas são:

As explicações de x, y, w e h são as seguintes:

As configurações do modelo CSS são as seguintes:

4. Depois de gerar imagens de destino e CSS, você pode baixá -las diretamente

Clique no botão de download para concluir o download:

5. Exportação de status de trabalho

Esta função pode exportar seu status de trabalho atual, incluindo os dados da imagem (imagens, arranjo de localização da imagem), configurações de parâmetros (incluindo as configurações de parâmetros da página inicial e configurações de modelo CSS), em um arquivo e você pode restaurar seu status de trabalho na próxima vez que estiver usando esse arquivo.

Exportar a seguinte figura:

Importar a figura a seguir:

Pode ser restaurado: