css スプライトの小さなサンプルコード_体験交換

これは非常に単純なアプリケーションですが、設計上、サーバーへの負荷を軽減し、リクエストの数を減らすことができ、これは良い方法です。
特に注意すべき点は、このような小さな画面上に2枚の画像を表示しても、応答速度はそれほど遅くなりませんが、問題は、2枚の画像が交互に表示される場合、背景画像が乱れやすいことです。リロードしても効果は長時間現れません。 (サーバーの応答速度や画像サイズにより時間は異なります)

CSS部分は以下の通りです:

body {
font-family: "Lucida Sans", "Lucida Sans Unicode ";
font-size: 14px;
line-height: 24px;
}
ul {
list-style-type: none;
}
li { float: left;

}
a{
背景画像: url(bg.gif);
高さ: 26px;
背景位置: 53px 0px; 表示: ブロック;
右マージン: 10px;
幅: 53px;
テキスト整列: 中央;
カラー: #333333;
}

li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
}
li a:hover {
text -decoration: none;
background-position: 0 0px;//ここでは特定の座標から画像を表示し始めるように指定します}


上記のコードを見ると難しくありませんこれが決定的な役割を果たしているということ

background-position:* *px; とは


このようにして、複雑な CSS アプリケーションで背景画像の再読み込みの問題を解決できます。