CSSでのスプライトの適用

この記事では、CSS でのスプライトの適用を主に紹介します。これは、設計上、サーバーの負荷を軽減し、リクエストの数を減らすことができる優れた方法です。

コード例は次のとおりです:

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

} 
a{ 
  background-image: url(bg.gif); 
  height: 26px; 
  background-position: 53px 0px; 
  display: block; 
  margin-right: 10px; 
  width: 53px; 
  text-align: center; 
  color: #333333; 
} 

li a:link { 
  text-decoration: none; 
} 
li a:visited { 
  text-decoration: none; 
} 
li a:hover { 
  text-decoration: none; 
  background-position: 0 0px;//在这里规定从某一坐标开始显示图片}

概要:

このような小さな画像では、実際には 2 枚の画像でも応答時間の点ではそれほど遅くありませんが、問題があります。 2 つの画像が交互に表示されます。背景画像が再ロードされ、長時間表示されなくなることがよくあります。

関連する推奨事項:

CSS スプライトを使用して画像リクエストを減らす

DIV+CSS 背景 1 つの全体画像 (CSS スプライト)

CSS スプライト テクノロジ zt 10 日間で Web 標準を学ぶ (div+css) ) _html/css_WEB-ITnose

以上がCSSでのスプライトの適用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。