CSSスプライトマップの配置方法

スプライト マップは、background-image、background-repeat、background-position の組み合わせを使用して背景を配置します。background-position 属性では、数値を使用して、レイアウト ボックス オブジェクトの位置で背景イメージを正確に配置できます。 。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css スプライト マップは、実際には複数の画像を 1 つの画像に統合し、CSS 背景配置テクノロジを使用して Web ページの背景をレイアウトします。

画像が多いと http リクエストが増加し、特に画像が多い Web サイトの場合、間違いなく Web サイトのパフォーマンスが低下するため、この利点も明らかです。 CSS スプライトを使用して画像の数を減らすと、結果的に速度が向上します。

スプライト画像生成の背景:

1. Web ページ上の各画像は、ユーザーに表示される前にサーバーにリクエストを送信する必要があります。

2. Web ページ上の画像が多すぎると、サーバーはリクエストの送受信を頻繁に行うため、ページの読み込み速度が大幅に低下します。サーバーがリクエストを受信および送信する回数を効果的に減らし、ページの読み込み速度を向上させるために、CSS スプライト テクノロジーが登場しました。

#スプライト マップの定義:

1. 多数の画像が 1 つの画像に結合され、アイコンは背景の配置によって各ボックスに表示されます。

2. 背景の配置方法は主に x 軸と y 軸の値を制御することによって行われます。

「background-image」、「background-repeat」、および「background-position」の組み合わせを使用して、背景を配置します。background-position では、数値を使用して、レイアウト ボックス オブジェクトの位置で背景画像を正確に配置できます。 。

スプライト チャートを使用するためのヒント:

1. 一般的な状況: ボックスを使用するだけで、内部の背景画像がスプライト チャートになります。使用時に軸と y 軸を調整します。

2. 特別な状況: ボックス内に小さなアイコンがあります。このとき、小さなアイコンはラベル (i ラベルまたはスパン) で囲まれています。小さなアイコンの位置を設定した後 (自動的に変換されます)インラインブロックに)、幅と高さを定義します。この幅と高さがスプライトチャート内の小さな絵の幅と高さになります、そして、x 軸と y 軸の値に注目してください。

#例:

スプライト

HTML コード

<ul class="Sprites"> 
    <li><span class="a1"></span><a href="#">WORD文章标题</a></li> 
    <li><span class="a2"></span><a href="#">PPT内容标题</a></li> 
    <li><span class="a3"></span><a href="#">Excel内容标题</a></li> 
    <li><span class="a4"></span><a href="#">PDF内容标题</a></li> 
    <li><span class="a5"></span><a href="#">文本文档标题</a></li> 
</ul>

css コード

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background-image: url(ico.png);background-repeat:no-repeat;} 
ul.Sprites li a{ padding-left:5px} 
ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

レンダリング:

##css スプライト キー コードと説明

ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

最初に ul.Sprites li scan の背景を紹介します

#ul.Sprites li span{background-image: url(ico.png);background-repeat:no-repeat;}

SPAN の CSS 背景画像を設定します。

次に、さまざまなスパン クラスのアイコンの背景の位置に特定の値をそれぞれ設定します

##ul.Sprites li span.a1{background-position: -62px - 32px }

背景画像を対応するボックス オブジェクトの背景として設定し、左に 62 ピクセル「ドラッグ」し、上に 32 ピクセル「ドラッグ」して、この背景アイコンの表示を開始します

• ##ul.Sprites li span.a2{background-position: -86px -32px}背景画像を対応するボックス オブジェクトの背景として設定し、左に 86 ピクセル「ドラッグ」し、上に 32 ピクセル「ドラッグ」します。この背景アイコンの表示を開始します

• ul.Sprites li span.a3{background-position: -110px -32px}背景画像を対応するアイコンの背景として設定しますボックス オブジェクトを左に 110 ピクセル「ドラッグ」し、上に「ドラッグ」します。この背景アイコンの表示を開始するには、「32 ピクセル」移動します。 -133px -32px}

  背景画像を対応するボックス オブジェクトとして設定します。背景の後ろに 133 ピクセル左に「ドラッグ」し、32 ピクセル上に「ドラッグ」すると、この背景アイコンの表示が開始されます

• #ul.Sprites li span.a5{background-position: -158px -32px}背景画像を対応するボックス オブジェクトの背景として設定し、158px 左に「ドラッグ」し、32px を「ドラッグ」します上向きにこの背景アイコンの表示を開始します

• キー: 背景の背景位置には 2 つの値があります。最初の値は左への距離の値を表します (正の値も可能)または負）、2 番目の値は上部までの距離値を表します（正または負の値を指定できます）

背景の背景位置には、正または負の 2 つの値があります。は、背景画像をオブジェクトボックスの背景画像として使用することを意味します 背景画像を左に移動させて距離を考慮すると背景画像が表示され始めます 負の数の場合は を意味します背景画像はボックスオブジェクトの背景画像として使用されます 背景画像をボックスオブジェクトの左辺を超えるところまでドラッグし、さらにボックスオブジェクトの上端を超えるところまでドラッグすると表示が開始されます背景画像。

• (学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSスプライトマップの配置方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。