wulin.comの記事紹介（www.vevb.com）：CSS Spriteは、SpriteとELFの写真と呼ばれることもありますが、すべてのフロントエンドのオープニングが出会う問題であり、小さな画像読み込み最適化の一般的な方法でもあります。私はすべての学生が原則を知っていると信じているので、私は詳細には入らないでしょう。
CSS Spriteは、スプライトとスプライトと呼ばれることもありますが、すべてのフロントエンドが開く問題であり、小さな画像読み込みの最適化の一般的な方法でもあります。私はすべての学生が原則を知っていると信じているので、私は詳細には入らないでしょう。
私は常にHTML5を使用して、スプライトピクチャを合成するためのツールを実現するように動機付けられてきました。これは、小さなプロジェクトの迅速な発展を促進し、写真を組み合わせて写真を開くなどの機械的労働を削減します。最近、私はついにそれを想像して実装するのに時間がかかりました。
Go！PNGはじめに：現在の関数は次のとおりです。
使用の手順：1。以下に示すように、小さな画像ファイルを操作領域にドラッグアンドドロップします。 2。下の図に示すように、クラス属性の設定とターゲット画像とCSSファイルの生成を入力します3.生成されたCSSファイルは、CSSテンプレートを変更することでカスタマイズできます。使用されるテンプレート関数は、John Resigのマイクロテンプレーションです。
使用できる変数は次のとおりです。
x、y、w、およびhの説明は次のとおりです。
CSSテンプレートの設定は次のとおりです。
4。ターゲット画像とCSSを生成した後、それらを直接ダウンロードできますダウンロードボタンをクリックしてダウンロードを完了します。
5。作業ステータスの輸出この関数は、画像データ（写真、写真の配置）、パラメーター設定（ホームページパラメーター設定、CSSテンプレート設定を含む）を含む現在の作業ステータスを1つのファイルにエクスポートできます。このファイルを使用して次回の作業状況を復元できます。
次の図をエクスポートします。
次の図をインポートします。
復元できます：