こんにちは、Magento の CSS スプライトに関するチュートリアルを探しています。GTspeed、Webo などのプラグインをいくつか見つけましたが、これまでのところ何も達成されていません。
手伝ってくれますか？
2847 次
1 に答える
0
CSS スプライトをノックオフする
メインの Web ページのデザインに 6 つの画像が使用されていて、ブラウザがそれらを個別にダウンロードする必要があるとします。それらを 1 つの画像に結合すると、ページの速度が大幅に低下する可能性があります。これにより、ページを表示するために必要な往復が減り、サイトが高速になります。
6 つの画像をダウンロードする代わりに、Web ページは 1 つの画像をダウンロードするだけで済みます。これが CSS スプライトの美しさです。1 つのリソースですが、複数の用途があります。ほとんどの Web ページでは、デザインにいくつかの小さな画像が使用されています。背景画像、隅の画像、アイコン、メニュー項目など。ページ速度の観点から見ると、これらの小さな画像は非常に重要です。
すべての画像をダウンロードする必要があります。つまり、Web ブラウザーがサーバーに画像を要求し、サーバーが画像を送信し、ブラウザーが画像を表示する必要があります。これが 1 つまたは 2 つの画像でのみ発生する場合は問題ありませんが、読み込まれる画像が増えるにつれて、ページの速度が低下します。このシナリオの解決策は、画像スプライトと呼ばれ、複数の小さな画像を 1 つの画像に結合して、Web ページを大幅に高速に表示できるようにします。画像を CSS スプライトに結合する方法
CSS スプライトを作成する際には、主に 2 つの手順を実行する必要があります。最初に画像を作成し、次に画像を配置する必要があります。画像の結合
ここでは簡単な例を使用します。スタイルのために Web ページに表示したい 2 つの画像があり、それらを 1 つに結合したいとします。スプライトを作成するには、画像のサイズを知る必要があります。両方の画像が同じサイズ (50 ピクセル x 50 ピクセル) の例を使用します。
これらの画像を組み合わせるには、100 ピクセル x 50 ピクセルの画像を作成します。この画像の名前を「sprite.png」としましょう。結合された画像ができたので、画像について知っていることを使用して、Web ページに正しく表示できます。
結合された画像は、幅 50 ピクセル、高さ 100 ピクセルになります。そのため、最初の画像 (メガホン) は新しい画像の上部 50 ピクセルにあり、2 番目の画像 (笑顔) は画像の下部 50 ピクセルにあると言えます。この知識を使用して、画像をページに正しく配置できます。つまり、メガホンが必要な場合は画像の上半分を表示し、笑顔が必要な場合は画像の下半分を表示します。これが私たちがそれを行う方法です...
ページ上の画像の配置
この例では、画像を div の背景画像として使用します。これは、画像を表示するために HTML に空の div タグを作成することを意味します。メガホンの画像をページのどこかに表示したい場合は、"megaphone" の CSS div クラスを作成できます... .megaphone {width:50px; 高さ:50px; background:url(images/sprite.png) 0 0px;}
上記の CSS コードは、メガホン画像 (50px x 50px) の幅と高さを示しており、結合された画像である画像 "sprite.png" も呼び出しています。最後に、スプライトがどのように機能するかである「0 0px」部分を言っています。画像を "0 0px" から開始するように指示することで、画像を 0 ピクセル X および 0 ピクセル Y から表示する必要があることを意味します。それは本当に「画像を上から始めて」「画像を左から始めて」と言っています。CSS で画像の幅と高さを定義したため、画像は画像の 50 ピクセル下 (メガホンがある場所) でのみ表示され、停止するため、スマイリー フェイスはまったく表示されません。では、スマイリー フェイスを実行して、コードがどのように変化するかを見てみましょう。「smile」という CSS クラスを作成します... .smile {width:50px; 高さ:50px; background:url(images/sprite.png) 0 -50px;}
同じ幅と高さを指定していることに注意してください。同じ画像を呼び出していますが、変更したのは「0 -50px」の部分です。これは、画像に別の場所から開始するように指示しているためです。具体的には、画像を 50 ピクセル下 (-50px) から開始するように指定しています。これは、結合されたイメージの下半分 (上から 50 ピクセル下) まで笑顔のイメージが開始されないためです。CSS が完成したので、画像を表示したい場所で HTML の div を呼び出すだけです。メガホンが必要な場合は、「megaphone」という空の div を入力するだけです
スマイリー フェイスが必要な場合は、「smile」という div を入力します。
これは画像を CSS スプライトに結合するための基本ですが、それを行うには多くの方法があり、ページに最適なものを検討する価値があります。上記のチュートリアルは、スプライトがどのように機能するかを一般的に示すためのものであり、スプライトについて詳しく説明するものではありません。
于 2014-11-05T17:19:58.177 に答える