css スプライト css スプライト生成ツール_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/8641795

Baidu クラウド ディスクのダウンロード

http://pan.baidu.com/s/1hqJ6aC8

方法使用するには

1. ps または dw を使用して必要な画像を切り出します

2. CssSprite.exe を開きます

CssSprite.exe ファイルを開きます。以下にダウンロードアドレスを記載します

3. 画像を開きます。

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

複数の画像を選択し、[開く]ボタンをクリックします

4. 画像を配置します

今日のトップボタンのデフォルトの配置を水平方向と垂直方向に選択できます。または、マウスで画像のドラッグ位置を選択することもできます。ドラッグが完了すると、プログラムは内部画像の位置に基づいて最小面積のスプライトを生成します。もちろん、対応する画像の位置も生成されます。

5. コード生成

プログラム内で Sass コードと CSS コードを生成できます。「携帯電話かどうか」を選択すると、すべてのサイズを 2 で割ります。携帯電話上のデザイン図面はサイズが大きいことが多いため、画像を生成した後、生成されたコードをコピーすることをお勧めします

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

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