CSS は画像平坦化テクノロジーをどのように使用しますか?

この章では、CSS で画像ステッチ技術を使用する方法を紹介します。困っている友人は参考にしていただければ幸いです。

#1. 画像ステッチング #画像ステッチングは、単一の画像の集合です。

多くの画像を含む Web ページの読み込みと複数のサーバーへのリクエストの生成に時間がかかる場合があります。

画像ステッチを使用すると、サーバー リクエストの数が減り、帯域幅が節約されます。

2. 画像の結合 - 簡単な例3 つの独立した画像を使用する代わりに、この 1 つの画像 ("img_navsprites. gif"):

CSS を使用すると、画像の必要な部分だけを表示できます。

次の例では、CSS は「img_navsprites.gif」を表示する画像の一部を指定します:

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

分析例:

- 空にすることはできないため、src 属性は小さな透明なイメージのみを定義します。表示される画像は、CSS
で指定した背景画像になります。幅: 46px; 高さ: 44px - 使用する画像の部分を定義します。
• 背景:url(img_navsprites.gif) 0 0; - 背景画像とその位置を定義します (左 0 ピクセル、上 0 ピクセル)

• これは、画像ステッチを使用する最も簡単な方法です。 , ここで、リンクとホバー効果を使用します。

3. 画像の結合 - ナビゲーション リストの作成

結合された画像 ("img_navsprites.gif") を使用してナビゲーションを作成したいと考えています。リスト。 リンク可能で背景画像もサポートしているため、HTML リストを使用します:

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

分析例:

#navlist{position : relative;} - Position は相対位置を設定し、

• navlist li{margin:0;padding:0;list-style:none;position:absolute;top :0 内で絶対位置を設定します。 ;} - マージンとパディングは 0 に設定され、リスト スタイルは削除され、すべてのリスト項目は絶対位置に配置されます

• #navlist li, #navlist a{height:44px;display: block ;} - すべての画像の高さは 44px

• 次に、各特定のセクションの位置とスタイルを説明します。

#home{left :0px ;width:46px;} - 画像を左端に配置し、画像の幅は 46px

• #home{background:url(img_navsprites.gif) 0 0; } - 背景画像とその位置を定義します (左 0 ピクセル、上 0 ピクセル)

• #prev{left:63px;width:43px;} - 右側 63 ピクセルに配置 (#home width)項目間には 46 ピクセルの余分なスペースが必要です）、幅は 43 ピクセルです。

• #prev{background:url('img_navsprites.gif') -47px 0;} - 右に 47px の背景画像を定義します (#home width 46px 仕切りの 1px)

• #next{left:129px;width:43px;}- 右の位置は 129px (#prev 63px #prev 幅は 43px と残りのスペース)、幅は 43px です。

• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 背景画像の右側に 91px を定義します (#home 46px 1px 分割線) #prev width 43px 1px分割線)

• 4. 画像ステッチ - ホバー効果

次に、次のことを行います。ナビゲーションリストにホバー効果を追加します。 停止効果。 :hover セレクターは、マウスが要素上にあるときに効果を表示するために使用されます。

ヒント: :hover セレクターは、すべての要素に適用できます。

新しい画像 ("img_navsprites_hover.gif") には、3 つのナビゲーション画像と 3 つの画像が含まれています。

これは、6 つの別々の画像ではなく、1 つの画像であるためです。画像ファイルの場合、ユーザーが画像の上にマウスを移動したときに遅延読み込みが行われることはありません。

ホバー効果を追加するには、3 行のコードを追加するだけです:

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

分析例:

リスト項目にはリンクが含まれているため、 :hover pseudo-class

• #home a:hover{background: 透明な url(img_navsprites_hover.gif) 0 -45px;} を使用できます - 3 つのホバー画像すべてに同じものを指定します背景位置、それぞれ 45 ピクセルずつ下にあります

以上がCSS は画像平坦化テクノロジーをどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。