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つの誤解があり理解できませんでした。たとえば、順序なしリストの各項目の
間違いがあれば修正してください。
参考:
W3C CSSの背景属性
切り抜きの一部を背景として表示
CSSスプライトオンラインツール
この記事のデモダウンロード:
タオバオのナビゲーションバーを模倣する(抽出コード:e0f5)