css スプライト、css スプライト生成ツール V3.0 update_html/css_WEB-ITnose

CSS スプライトとは

CSS スプライトは、中国では多くの人に CSS スプライトと呼ばれています Web 画像アプリケーションの処理方法です。これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。

このツールを使用する理由

1. Web ページの読み込みを高速化します

ブラウザが受け入れる同時リクエストの数は 10 です。画像が多すぎると、全体的な視覚効果に影響し、ネットワーク帯域幅が不安定な場合、読み込みはさらに悪夢であるため、写真は 1 つの大きな画像に結合され、それによって読み込み速度とページのレンダリングが高速化されます

2. 簡単なポストメンテナンス

このツールは、画像を選択することで直接画像を結合できます。もちろん、スプライトを自分でレイアウトし、コードを直接生成することもできます。シンプルで使いやすいです

3. オープンソース

このプログラムは github でオープンソース化されています。アドレス: https: //github.com/iwangx/sprite

csdn ダウンロードアドレス (分割しないでください)

http://download.csdn.net/detail/wx247919365/8660503

使い方

1.必要な写真を切り出します

2. CssSprite.exe を開きます

CssSprite.exe ファイルを開きます

左上隅のボタンをクリックして画像を開きます

現在のバージョンでは、一度に 1 種類の画像ファイルを開くことができます

4. .sprite ファイル

今回のアップデートで追加された画像の生成時に .sprite ファイルを同時に生成するには、「プログラムの「.sprite を開く」ボタンを押して、.sprite ファイルを選択し、スプライト画像の元の表示を復元します

.sprite と画像ファイルが同じファイル内にあることを確認してください

5画像を配置します

上部のボタンで水平方向と垂直方向のデフォルトの配置を選択することも、マウスで画像のドラッグ位置を選択することもできます。ドラッグが完了すると、プログラムは位置に基づいて領域を生成します。内部画像の最小のスプライト画像も、当然、対応する画像の位置を変更します

画像の追加と削除を行うには、現在 1 つの画像のみを操作できます。

6. コード生成

プログラム内で Sass コードと CSS コードを生成できます。「モバイル版かどうか」を選択すると、すべてのサイズが 2 で割られます。モバイル版ではデザイン図が比較的大きいため、画像を生成した後に生成されたコードをコピーすることをお勧めします

7. スプライト画像を保存します

「Generate Sprite Image」ボタンをクリックし、プログラムはデフォルトでステップ 3 で開く画像のアドレスを選択し、「OK」をクリックしてスプライト画像を生成します。

同時に.spriteファイルも生成されます