CSS高級技巧:CSS Sprites

2024-07-11 08:42:38

字體：大中小

來源：轉載

供稿：網友

上一篇CSS教程文章：CSS高級技巧:圓角矩形
CSS Sprites, 利用CSS background-position 進行背景絕對定位, 減少HTTP請求, 加速網頁顯示, 解決圖片載入閃動問題的技巧.
CSS Sprites最適合用來做的, 恩, 比如: 清單導航的CSS鼠標翻轉效果大量小圖標集中的應用 (FckEditor) ...很多很多,多的想不出來了.
實現原理簡單地說就是控制容器的大小, 然后利用background-repeat, background-position來對背景圖片進行定位. 更可以理解為將網站大量背景圖整合到一張大圖中的這種行為( 表象上 )
用一個鼠標翻轉事件來說明吧:
準備:

01.jpg02.jpg
HTML代碼:

<ul>
<li><a id="item1" href="#" title="Item 1"> </a></li>
<li><a id="item2" href="#" title="Item 2"> </a></li>
<li><a id="item3" href="#" title="Item 3"> </a></li>
<li><a id="item4" href="#" title="Item 4"> </a></li>
<li><a id="item5" href="#" title="Item 5"> </a></li>
<li><a id="item6" href="#" title="Item 6"> </a></li>
<li><a id="item7" href="#" title="Item 7"> </a></li>
<li><a id="item8" href="#" title="Item 8"> </a></li>
<li><a id="item9" href="#" title="Item 9"> </a></li>
</ul>

CSS代碼:

ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(02.jpg)}
li {list-style-type:none; width:100px; height:100px; float:left}
li a { display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(01.jpg) no-repeat 500px 500px; }
a#item1:hover {background-position: 0 0; }
a#item2:hover {background-position: -100px 0;}
a#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position: 0 -100px;}
a#item5:hover {background-position: -100px -100px;}
a#item6:hover {background-position: -200px -100px;}
a#item7:hover {background-position: 0 -200px;}
a#item8:hover {background-position: -100px -200px;}
a#item9:hover {background-position: -200px -200px;}

效果圖如下:

有人要問了, 這有什么用么? 這可以模擬圖片熱區說明, 地圖提示等等...
Tips:
CSS Sprites需要精確的背景圖片定位, 比較讓人頭疼.
相對于減少了多次HTTP請求的優點, 卻增加了一次性一個大的HTTP請求的缺點... 自己權衡吧
下一篇CSS教程文章：CSS高級技巧:圖片替換

上一篇：CSS高級技巧:圖片替換

下一篇：CSS高級技巧:圓角矩形