CSS画像ステッチ技術

画像ステッチング

画像ステッチングは、単一の画像のコレクションです。

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

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

画像のステッチ - 簡単な例

3 つの別々の画像を使用する代わりに、次のように 1 つの画像を使用します。

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

rreee

runインスタンス»オンラインインスタンス分析を表示する「実行インスタンス」ボタン：width：46px;使用するもの画像のその部分

background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")

0 0 - 背景を定義します。画像とその位置 (左 0 ピクセル、上 0 ピクセル)

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

画像のステッチ ("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") を使用してナビゲーションリストを作成したいと考えています。
インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
.home {
    width: 46px;
    height: 44px;
    background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") 0 0;
}

.next {
    width: 43px;
    height: 44px;
    background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") -91px 0;
}
</style>
</head>
<body>

<p class="home"></p><br><br>
<p class="next"></p>
</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

分析例:

#navlist{position:relative;} - 相対位置を設定して内部に絶対位置を設定します
#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("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
") 0 0;} -背景画像とその位置を定義します (左 0 ピクセル、上 0 ピクセル)
#prev{left:63px;width:43px;} - 右配置 63 ピクセル (#home 幅 46 ピクセル + 項目間の追加スペース)、幅 43 ピクセル。
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') -47px 0;} - 右側に 47px を定義します背景画像の (#home 幅 46px + ディバイダー 1px)
#next{left:129px;width:43px;}- 右配置 129px (#prev 63px + #prev 幅は 43px + 残りのスペース)、幅は43px。
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') no-repeat -91px 0;} - 定義背景画像 91 ピクセル右 (#home 46px+1px ディバイダー + #prev ワイド 43px+1px ディバイダー)

画像の結合 - ホバー効果

次に、ホバー効果をナビゲーションリストに追加します。

	:ホバーセレクターは、要素の上にマウスを置いたときの効果を表示するために使用されますヒント: :ホバーセレクターはすべての要素に適用できます。

新しい画像 ("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif") には、3 つのナビゲーション画像と 3 つの画像が含まれています:

これは 1 つの画像であるため、 6 つの個別の画像ファイルの代わりに、ユーザーが画像の上にマウスを置いたときに遅延読み込みする必要はありません。

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

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
#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('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -91px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/css/"></a></li>
  <li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

インスタンス分析:

このリスト項目にはリンクが含まれているため、次を使用できます: hover pseudo-class
#home a:hover{background:parents url("https://img.php.cn/upload/course /000/000/015/ 5c64fdaa5b0ba752.gif
") 0 -45px;} - 3 つのホバー画像すべてに、同じ背景位置をそれぞれ 45 ピクセルだけ下に指定します