1. ページ内に点在する背景画像をすべて 1 つの大きな画像に集約し、その大きな画像を Web ページに使用します。ユーザーがページにアクセスするとき、サーバーにリクエストを送信する必要があるのは 1 回だけです。
2. 背景位置などの属性を直接使用して、必要な背景部分を正確に見つけます。
例
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<本文>
<div>
<スパン></スパン>
<スパン></スパン>
<スパン></スパン>
</div>
</body>
<スタイル>
.box スパン {
表示: インラインブロック;
}
.j {
背景: url("abcd.jpg") 繰り返しなし -389px -141px;
幅: 102ピクセル;
高さ: 112ピクセル;
}
.w {
背景: url("abcd.jpg") 繰り返しなし -117px -560px;
幅: 135ピクセル;
高さ: 112ピクセル;
}
.t {
背景: url("abcd.jpg") 繰り返しなし -368px -417px;
幅: 102ピクセル;
高さ: 112ピクセル;
}
</スタイル>
</html>以上、CSSスプライト技術の紹介でしたので、皆様のお役に立てれば幸いです。