ホームページ > 記事 > ウェブフロントエンド > CSSでスプライトを使用する方法
CSSでスプライトを使用する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-07 18:06:055939ブラウズ
CSS でスプライト マップを使用する方法: 最初に、background-image 属性を使用してスプライト マップをインポートし、次に、background-repeat:no-repeat を使用して画像が繰り返されないように設定し、最後に、background-画像の初期位置を正確な位置に設定するには、position 属性を使用します。
このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS スプライトとは何ですか?
CSS Spriteとは直訳すると「CSSスプライト」で、「CSS画像ステッチング」や「CSSテクスチャポジショニング」とも呼ばれる、Web画像アプリケーションの処理方法です。実際には、複数の小さな画像を 1 つの画像に統合し、CSS "background-image"、"background-repeat"、"background-position" を使用します。 " を使用して背景の配置を実行すると、background-position は数値を使用して背景画像をレイアウト ボックス オブジェクトの位置に正確に配置できます。
利点:
Web ページの http リクエストを減らし、ページの読み込みを高速化し、ページのパフォーマンスを向上させます (小さな画像に適しています)。
たとえば、ページ内で多数のアイコン画像が使用されている場合、ページがそれらの画像を 1 つずつリクエストすると、大量の http リクエストが発生することになります。このとき、これらの画像を 1 つに結合すると、ページはロードする必要があるのは 1 回だけです。これにより、http リクエストによるパフォーマンスの消費が軽減されます。以下に示すように:
画像の統合原理:
画像を切り取り、同時に統合します。
配置するときに下、右などを使用することは避けてください。スプライトの幅または高さを拡大するときに位置エラーを避けるには、特定の値を使用してください。
小さなアイコン用に十分なスペースを確保してください。通常、これらのアイコン要素を使用すると多くのコンテンツが含まれ、広いスペースが必要になる可能性があるため、この領域内の他の画像が誤って表示される可能性があります。通常の状況では、これらの小さなアイコンはファイルの右端に統合されます。
- #統合スプライト画像は 1 つにつき 100KB 以内にしてください。 #画像をカテゴリ別に統合します。
- サイズの計算を容易にするために、スプライトの座標は通常、整数倍として計算されます。
- 実装コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sprite精灵图使用</title>
<style type="text/css">
ol, ul ,li{list-style:none};
body, p, ul, li {margin:0; padding:0;}
ul li {
float: left;
background-color: #63caac;
color: #fff;
padding: 5px 10px;
margin-right: 10px;
}
li:hover{background-color:#347764;}
ul.sprite li span{display: block;}
ul.sprite li span.l1{background-position:0 0;}
ul.sprite li span.l2{background-position:-64px 0;}
ul.sprite li span.l3{background-position:-128px 0;}
ul.sprite li span.l4{background-position:-192px 0;}
ul.sprite li span{width:64px;padding-top:5px;height:64px;overflow:hidden;background:url(img.png) no-repeat;}
</style>
</head>
<body>
<ul class="sprite">
<li><span class="l1"></span></li>
<li><span class="l2"></span></li>
<li><span class="l3"></span></li>
<li><span class="l4"></span></li>
</ul>
</body>
</html>推奨学習: 「
css ビデオ チュートリアル以上がCSSでスプライトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。