この章では、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; }
分析例:
結合された画像 ("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;}
次に、次のことを行います。ナビゲーションリストにホバー効果を追加します。 停止効果。 :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;}
以上がCSS は画像平坦化テクノロジーをどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。