CSS Sprites, 利用CSS background-position 進(jìn)行背景絕對定位, 減少HTTP請求, 加速網(wǎng)頁顯示, 解決圖片載入閃動問題的技巧.
CSS Sprites最適合用來做的, 恩, 比如:
清單導(dǎo)航的CSS鼠標(biāo)翻轉(zhuǎn)效果
大量小圖標(biāo)集中的應(yīng)用 (FckEditor)
...很多很多,多的想不出來了.
實現(xiàn)原理簡單地說就是控制容器的大小, 然后利用background-repeat, background-position來對背景圖片進(jìn)行定位. 更可以理解為將網(wǎng)站大量背景圖整合到一張大圖中的這種行為( 表象上 )
用一個鼠標(biāo)翻轉(zhuǎn)事件來說明吧:
準(zhǔn)備:
HTML代碼:
�。紆l＞
＜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;}
效果圖如下:
有人要問了, 這有什么用么? 這可以模擬圖片熱區(qū)說明, 地圖提示 等等...
Tips:
CSS Sprites需要精確的背景圖片定位, 比較讓人頭疼.
相對于減少了多次HTTP請求的優(yōu)點, 卻增加了一次性一個大的HTTP請求的缺點... 自己權(quán)衡吧
|
