站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 網站技術 >>



站長之家制作并測試CSS Sprites技術實現實例


【發布人:站長之家    發布日期:2015-04-04】

在網站上的圖片較多的時候,尤其是一些圖標式圖片較多的時候,站長們可以采用CSS Sprites技術來首先把這些圖片貼合到一張圖片上,然后在用瀏覽器打開時,再把這些圖片分離出來,以背景圖片的方式顯示在網頁的相應位置。這樣做的好處是可以減少瀏覽器在打開網頁時的http請求次數,降低網站服務器的負擔,加快網頁的打開速度,提升網站性能,尤其是在網頁圖片非常多的時候,每一個圖片都需要http請求,然而如果把這些圖片貼合合成一個較大的圖片,但是只需要請求一次,這樣就明顯減少了http請求,杜宇提升網站服務器性能很有幫助,特別是對于那些大型網站,更是如此。使用CSS Sprites技術的方法首先是把一些圖片貼合到一張圖片上,然后利用CSS代碼里的background:url(allico.jpg) no-repeat代碼將圖片作為背景的方式下載到瀏覽器客戶端,最后在使用background-position來對各個圖片進行定位,并把各個圖片顯示在相應的位置。下面站長之家寫出了一個使用CSS Sprites技術的實例,說明如何使用CSS Sprites技術來顯示圖片。

下面是利用CSS Sprites技術實現顯示圖片的實例,下面是源代碼,該源代碼在多個瀏覽器如IE、Chrome、360瀏覽器上測試通過:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>采用CSS Sprites技術顯示圖片減少http請求實例</title>

<style type="text/css">
.ulsprites{ list-style:none; float:left; margin:0 auto; padding:0; border:1px solid #F00; width:280px; height:150px;}
.ulsprites li{ font-size:14px; height:20px; line-height:20px; overflow:hidden; margin-top:8px; margin-left:10px;}
.ulsprites li span{ float:left; width:17px; height:17px; background:url(allico.jpg) no-repeat; overflow:hidden;}
.ulsprites li a{ margin-left:5px;}
.ulsprites li span.a1{ background-position: -8px -6px;}
.ulsprites li span.a2{ background-position: -32px -6px;}
.ulsprites li span.a3{ background-position: -56px -6px;}
.ulsprites li span.a4{ background-position: -80px -6px;}
.ulsprites li span.a5{ background-position: -104px -6px;}
</style>

</head>
<body>

<p>以下是已經將圖標拼合后的圖片:<br /><img src="allico.jpg" /></p>
<p>下面是將拼合后的圖片采用定位的方式<br />將各個圖標分離出來后顯示到相應位置:</p>
<ul class="ulsprites">
<li><span class="a1"></span><a href="#">本文為創作的WORD文檔</a></li>
<li><span class="a2"></span><a href="#">本文檔為Excel數據表格</a></li>
<li><span class="a3"></span><a href="#">本PPT文檔為制作的幻燈片</a></li>
<li><span class="a4"></span><a href="#">本文件為網站PDF文檔</a></li>
<li><span class="a5"></span><a href="#">文文檔為站內文本文件</a></li>
</ul>

</body>
</html>

本例中對五個小圖標進行貼合成一幅圖片allico.jpg,每一個圖標的大小均為17*17的大小,所以,在代碼中我們對<span>的大小定義為.ulsprites li span{ float:left; width:17px; height:17px; background:url(allico.jpg) no-repeat; overflow:hidden;} 寬和高都是17的大小。在定位圖片的時候,我們采用了.ulsprites li span.a1{ background-position: -32px -6px;} 這樣的定位方式,即采用background-position的屬性定位,屬性值的確認我們可以采用PS軟件來定位,如下面圖中的圖一中的紅色圈中所表示的圖片定位坐標數據,這樣我們就可以定位每一福圖片的大小和位置了。下面圖中的圖二是本實例代碼執行的結果,從圖二中可以看出貼合后的圖片,以及運行后的顯示效果。各位站長們還可以對代碼按照自己的需要進行修改,從而能夠制作出更多樣式的顯示效果出來,為站長們的網站增一分光彩。

CSS Sprites技術實現測試實例圖片


(本頁地址為:http://www.hdfwko.tw/tech/tech-9.html,請尊重別人勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家-站長網【www.hdfwko.tw】

四川快乐12开奖号