CSS「スプライト」スプライト application_html/css_WEB-ITnose

Web ページを作成する過程で、複数のアイコンを表示する必要に遭遇することがあります。

上の図の「婦人服」テキストの左側にあるアイコンのように。簡単な解決策は、各画像に タグを追加することですが、これを行うと HTTP リクエストの数が増加し、Web サイトの読み込み速度に影響します。これよりも優れた解決策は、スプライトです。

いわゆるスプライト画像は、CSS スプライトまたは PS ツールを使用して、必要なすべての小さな画像を 1 つの大きな画像につなぎ合わせ、要素のbackground-image属性とbackground-position属性を通じて画像の位置決めを完了します。 。

そのためにデモを作りました。

学習の過程で、背景画像の位置決め、つまり、background-position 属性の使用法と、この大きな画像内に表示される小さなアイコンをどのように配置するかという問題に遭遇しました。

問題は次のように単純化されます:

答えは、この画像を div の背景画像として設定することです。次に、画像 3 が div エリアに表示されるように画像を移動します。

4 つの小さな画像は同じサイズの 25x25 ピクセルで、div も 25x25 ピクセルであるとします。 divの背景画像に大きい画像を設定した場合、デフォルト画像の左上隅の頂点がdiv領域の頂点と一致するため、「小さい画像3」を横方向はそのままで垂直上に移動する必要があります変更なし。したがって、background-position:0px,-25px; を設定します (画像ピクセルの位置は CSS スプライト ツールで確認できます)。

とても単純な質問なのですが、なぜピクセル値が負の数になるのか、2つの誤解があり理解できませんでした。たとえば、順序なしリストの各項目の

をこの大きな画像に設定すると、完成した画像の各領域に穴が開くようになります。この画像を個別に見てください。全体像の一部ですが、私はこのように理解しています。なぜ 2 つの

が同じ小さな画像を表示するのか説明できません。私がこのような理解をしている理由は、各 li に独自の大きな画像があり、その大きな画像を移動して表示したい領域を表示するということを無視したからです。さらに、なぜピクセル値が負になるのでしょうか？ネットで調べてみると、理解できず、ピクセル値を負の数として覚えておけば十分だと考えているネチズンもいることがわかりました。div の頂点は移動しても画像は移動しないと考えている人もいます。それを説明しないでください。後で見つけた 2 つの文で目が覚めました:

何と言うか、画像位置決め技術は実際には窓を開けるのと同じであり、窓を通して外の景色を見ることになります。ウィンドウのサイズは変わりませんが、スプライト画像全体の位置を変更することができます。したがって、最初に画像のサイズに合わせて異なる風景を見ることができます。次に、それらは統合され、ネガティブな位置決めによって上または左に移動され、ウィンドウが正しい背景を表示できる位置に到達します。

画像の左上を原点として、画像全体を左上に動かすのがマイナス、画像全体を右下に動かすのがプラスです。

間違いがあれば修正してください。

参考：

W3C CSSの背景属性

切り抜きの一部を背景として表示

CSSスプライトオンラインツール

この記事のデモダウンロード：

タオバオのナビゲーションバーを模倣する（抽出コード：e0f5）