詳解css圖像拼合技術(shù)（精靈圖）

2024-07-11 08:31:44

字體：大中小

供稿：網(wǎng)友

CSS圖像拼合技術(shù)

1.圖像拼合

圖像拼合技術(shù)就是單個(gè)圖像的集合。有很多圖片的網(wǎng)頁可能會(huì)需要很多時(shí)間來加載和生成多個(gè)服務(wù)器的請(qǐng)求。使用圖像拼合會(huì)降低服務(wù)器的請(qǐng)求數(shù)量，并節(jié)省帶寬。圖像拼合實(shí)例

有了css樣式，我們可以顯示我們需要的圖像的一部分

詳細(xì)代碼如下：

<!doctype html><html><head> <meta charset="utf-8"/> <title>圖片整合</title> <style> .box{ width:200px; margin:0 auto; overflow:hidden;}.iton{ width:43px; margin-left:10px; height:44px; float:left; background:url(images/img_navsprites_hover.gif) no-repeat;}.span01{ background-position:0 0;}.span02{ background-position:-47px 0;}.span03{ background-position:-91px 0;}.span01:hover{ background-position:0 -45px ;}.span02:hover{ background-position:-47px -45px ;}.span03:hover{ background-position:-91px -45px ;} </style></head><body<div class="box"> <span class="iton span01"></span> <span class="iton span02"></span> <span class="iton span03"></span> </div><body></html>

運(yùn)行結(jié)果如下圖：