精霊図(雪碧図)の紹介と使用~
916 ワード
目的:サーバーが要求を受け入れる回数と送信する回数を効果的に減らすために、ページのロード速度の本質を高める:CSS精霊図は1ページの背景画像を処理する方式で、それは1ページの関連するすべての零細な背景画像を1枚の大きい図に集中して、それから大きい図をホームページに応用して、このように、ユーザーがこのページにアクセスする時、サービスに1回の要求を送信するだけで、ウェブページの中の背景の画像はすべて精霊図の使用を展示することができます:CSS精霊は実はウェブページの中のいくつかの背景の画像を1枚の大きい図の中(精霊図)に統合して、しかし、各ウェブページの要素は通常精霊図の中で異なる位置のある小さい図だけを必要として、精霊図の中のある小さい図を精確に確定するために、CSSの background-image、 background-repeat background-position属性背景位置決め、 その中で最も重要なのはbackground-position属性を用いて を正確に位置決めすることである.
<style>
.box{
width: 25px;
height: 25px;
background:url(images/tb.png) no-repeat 0 -125px;
}
</style>
<div class="box"/>
</code></pre>
</div>
</div>
</div>
</div>