欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談CSS Sprites切圖技術(shù)

  發(fā)布時(shí)間：2014-12-12 15:17:09   作者：佚名   我要評(píng)論
CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。

HTML代碼


復(fù)制代碼
代碼如下:

<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text快速拼寫(xiě) -->
<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代碼


復(fù)制代碼
代碼如下:

<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代碼


復(fù)制代碼
代碼如下:

<script src="<a ></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放圖片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一個(gè)li,放到一個(gè)數(shù)組中;
//console.log(iconH);
//在控制臺(tái)打印出容器的高度;
triggerLi.each(function () {
//遍歷數(shù)組中的每一個(gè)li
var $this = $(this),
//聲明變量賦值當(dāng)前的li;
$index = $this.index();
//聲明變量保存當(dāng)前l(fā)i的index值;
//console.log($index);
//在控制臺(tái)打印出每一個(gè)li的index值;
//console.log(iconH*$index);
//得出每一個(gè)圖片對(duì)應(yīng)的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍歷出每一個(gè)s標(biāo)簽的背景圖片;
$this.hover(function() {
//鼠標(biāo)移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠標(biāo)移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>

IMG(右鍵保存即可,重命名all.png)

效果圖

CSS Sprites優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1.利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過(guò)多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
3.解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。
4.更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

缺點(diǎn)

誠(chéng)然CSS Sprites是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)，如下：
1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；
2.CSS Sprites在開(kāi)發(fā)的時(shí)候比較麻煩，你要通過(guò)photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒(méi)什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開(kāi)發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來(lái)的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！
3.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無(wú)需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來(lái)的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。
4.CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁(yè)面有一堆ico（圖標(biāo)）。總之很多時(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。

相關(guān)文章

  • css sprites把很多小圖集成在一張圖片上

    網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來(lái)越被人們重視，采用這種技術(shù)來(lái)進(jìn)行圖片優(yōu)化的網(wǎng)站越來(lái)越多，國(guó)內(nèi)幾家大
    2009-04-02

  • CSS Sprites 樣式生成工具 3.0

    很高興為大家?guī)?lái)了CSS Sprites 樣式生成工具 3.0版本。 保存的設(shè)置文件也同時(shí)更新了，支持打開(kāi)舊的文件，會(huì)以新的格式保存（舊版本打不開(kāi)）。 操作界面做了小小的調(diào)整
    2009-06-23

  • CSS Sprites簡(jiǎn)介以及優(yōu)缺點(diǎn)

    阿里媽媽UED談CSS Sprites技術(shù).
    2009-10-20

  • 使用CSS sprite 的好處和壞處分析

    無(wú)處不在的 CSS sptites － 為數(shù)不多的幾個(gè)可以直接跳過(guò)”流行”這個(gè)過(guò)程，而可以馬上并且牢牢地躋身于最佳 CSS 實(shí)踐之中的幾個(gè)技術(shù)之一。
    2010-04-17

  • 什么是CSS Sprites（圖片合并）技術(shù) 圖文介紹

    眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過(guò)CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS
    2011-06-21

  • CSS Sprites詳解

    CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發(fā)表對(duì)該技術(shù)的 詳細(xì)闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來(lái)出來(lái)個(gè) 14 Rules
    2011-08-02

  • css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解

    近段時(shí)間一直在做前臺(tái)的一些東西，涉及到很多div+css的問(wèn)題,原來(lái)這個(gè)叫CSS Sprites技術(shù),我對(duì)前臺(tái)這些個(gè)東西比較感興趣，所以會(huì)去了解多一點(diǎn)
    2012-12-03

  • CSS Sprite從大圖中截取小圖完整教程

    這篇文章主要介紹了CSS Sprite從大圖中截取小圖完整教程的相關(guān)資料,需要的朋友可以參考下
    2014-12-29

最新評(píng)論