css中Sprites的應用

本篇文章主要介紹css中sprites的應用，這是一個很簡單的應用，不過在設計中，這樣做可以減輕伺服器的壓力，是請求次數減少，是一個不錯的方法。

實例程式碼如下：

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;//在这里规定从某一坐标开始显示图片}

總結：

在這種小圖片上即使是兩張圖片其實就回應時間來說也慢不了多少，不過有一個問題，就是兩張圖片交替時容易出現背景圖片從新加載而導致很段時間不顯示的效果。

相關推薦：

利用css sprites減少圖片請求

DIV CSS背景一張整圖( css sprites)

CSS Sprites技術zt十天學會web標準(div css)_html/css_WEB-ITnose

#

以上是css中Sprites的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！