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