如何透過CSS中Sprites實現切圖技術（附程式碼）-css教學-PHP中文網

首頁

web前端

css教學

如何透過CSS中Sprites實現切圖技術（附程式碼）

yulia

Sep 11, 2018 pm 03:31 PM

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn