CSS Sprites優缺點
優點
#1.利用CSS Sprites能很好地減少網頁的http請求,從而大大的提升頁面的效能,這也是CSS Sprites最大的優點,也是其被廣泛傳播和應用的主要原因;
2.CSS Sprites能減少圖片的字節,曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
3.解決了網頁設計師在圖片命名上的困擾,只需對一張集合的圖片上命名就可以了,不需要對每一個小元素進行命名,從而提高了網頁的製作效率。
4.更換風格方便,只需要在一張或少張圖片上修改圖片的顏色或樣式,整個網頁的風格就可以改變。維護起來更加方便。
缺點
誠然CSS Sprites是如此的強大,但是也存在一些不可忽視的缺點,如下:
1.在圖片合併的時候,你要把多張圖片有序的合理的合併成一張圖片,還要留好足夠的空間,防止板塊內出現不必要的背景;這些還好,最痛苦的是在寬屏,高分辨率的屏幕下的自適應頁面,你的圖片如果不夠寬,很容易出現背景斷裂;
2.CSS Sprites在開發的時候比較麻煩,你要透過photoshop或其他工具測量計算每一個背景單元的精確位置,這是針線活,沒什麼難度,但是很繁瑣;幸好騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具,雖然還有一些使用上的不靈活,但是已經比photoshop測量來的方便多了,而且樣式直接生成,複製,拷貝就OK!
3.CSS Sprites在維護的時候比較麻煩,如果頁面背景有少許改動,一般就要改這張合併的圖片,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,又只能(最好)往下加圖片,這樣圖片的位元組就增加了,還要改動css。
4.CSS Sprites非常值得學習和應用,特別是頁面有一堆ico(圖示)。總之很多時候大家要權衡利弊,再決定是不是應用CSS Sprites。
HTML程式碼:
<body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text快速拼写 --> <ul class="sprite"> <li><s class="s-icon"></s><a href="">CSS Sprite</a></li> <li><s class="s-icon"></s><a href="">CSS Sprite</a></li> <li><s class="s-icon"></s><a href="">CSS Sprite</a></li> <li><s class="s-icon"></s><a href="">CSS Sprite</a></li> <li><s class="s-icon"></s><a href="">CSS Sprite</a></li> <div class="clear"></div> </ul> </body>
CSS程式碼:
<style> body { background-color: #fc0; color:#333;} * {margin:0; padding:0;} ul,li {list-style: none;} a { color:#f00; font-weight: bold; text-decoration: none;} .sprite {margin:0 auto; width:1000px; padding-top: 50px;} .sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; } .sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; } .clear { clear:both;} </style>
JS程式碼:
<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>> <script> $(function () { var iconH = $(".sprite").find("s").height(), //找出存放图片的容器的高度; triggerLi = $(".sprite").children("li"); //找出每一个li,放到一个数组中; //console.log(iconH); //在控制台打印出容器的高度; triggerLi.each(function () { //遍历数组中的每一个li var $this = $(this), //声明变量赋值当前的li; $index = $this.index(); //声明变量保存当前li的index值; //console.log($index); //在控制台打印出每一个li的index值; //console.log(iconH*$index); //得出每一个图片对应的position值; $this.children("s").css("background-position","0 -"+iconH*$index+"px"); //利用js遍历出每一个s标签的背景图片; $this.hover(function() { //鼠标移入 $this.children("s").css("background-position","-132px -"+iconH*$index+"px"); }, function() { //鼠标移出 $this.children("s").css("background-position","0 -"+iconH*$index+"px"); }); }) }) </script>
以上是如何透過CSS中Sprites實現切圖技術(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!