css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解
發(fā)布時間：2012-12-03 14:06:22 作者：佚名 
我要評論
我要評論近段時間一直在做前臺的一些東西，涉及到很多div+css的問題,原來這個叫CSS Sprites技術(shù),我對前臺這些個東西比較感興趣，所以會去了解多一點
很久之前就在互聯(lián)網(wǎng)網(wǎng)站和一些js插件中見過這種技術(shù)的應(yīng)用，當時覺得很麻煩，就沒有用，也沒有去深究。
近段時間一直在做前臺的一些東西，涉及到很多div+css的問題。這個東東我又碰到了，所以我花了點時間去網(wǎng)上了解了下其中的原理。原來這個叫CSS Sprites技術(shù)，主要是個人愛好啦，我對前臺這些個東西比較感興趣，所以會去了解多一點。
廢話不多說，直接上我做的小例子：
這是一張多個小背景的圖片合并而成的圖片，當我們想要在頁面上只顯示其中我們需要的區(qū)域時，我們就需要將其“切”出來。
<style type="text/css">
.div_5758{
width:19px;
height:20px;
background: url("image/menu.png") no-repeat;
background-position:-71px -18px;}
</style>
<div class=div_5758></div>
這段代碼就是提取合并圖片中那個紅色叉叉圖片。
這時候該想想我們?yōu)槭裁匆@么做，這個東西百度一下，你就知道，我就簡單講下。
合并圖片之后會減少圖片的數(shù)量，進而減少了頁面請求圖片的次數(shù)，而當處于正常網(wǎng)絡(luò)的情況下，不大于200KB的單張圖片所需的載入時間是差不多的。這樣的話，頁面的加載效率就會調(diào)高。
技術(shù)永無止境，在此與各位共勉。
近段時間一直在做前臺的一些東西，涉及到很多div+css的問題。這個東東我又碰到了，所以我花了點時間去網(wǎng)上了解了下其中的原理。原來這個叫CSS Sprites技術(shù)，主要是個人愛好啦，我對前臺這些個東西比較感興趣，所以會去了解多一點。
廢話不多說，直接上我做的小例子：
這是一張多個小背景的圖片合并而成的圖片，當我們想要在頁面上只顯示其中我們需要的區(qū)域時，我們就需要將其“切”出來。
復(fù)制代碼
代碼如下:<style type="text/css">
.div_5758{
width:19px;
height:20px;
background: url("image/menu.png") no-repeat;
background-position:-71px -18px;}
</style>
復(fù)制代碼
代碼如下:<div class=div_5758></div>
這段代碼就是提取合并圖片中那個紅色叉叉圖片。
這時候該想想我們?yōu)槭裁匆@么做，這個東西百度一下，你就知道，我就簡單講下。
合并圖片之后會減少圖片的數(shù)量，進而減少了頁面請求圖片的次數(shù)，而當處于正常網(wǎng)絡(luò)的情況下，不大于200KB的單張圖片所需的載入時間是差不多的。這樣的話，頁面的加載效率就會調(diào)高。
技術(shù)永無止境，在此與各位共勉。
相關(guān)文章
- 網(wǎng)頁制作Webjx文章簡介：在google中搜索一下css sprites這個名稱，會查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進行圖片優(yōu)化的網(wǎng)站越來越多，國內(nèi)幾家大2009-04-02
- 很高興為大家?guī)砹薈SS Sprites 樣式生成工具 3.0版本。 保存的設(shè)置文件也同時更新了，支持打開舊的文件，會以新的格式保存（舊版本打不開）。 操作界面做了小小的調(diào)整2009-06-23
- 阿里媽媽UED談CSS Sprites技術(shù).2009-10-20
- 無處不在的 CSS sptites － 為數(shù)不多的幾個可以直接跳過”流行”這個過程，而可以馬上并且牢牢地躋身于最佳 CSS 實踐之中的幾個技術(shù)之一。2010-04-17
什么是CSS Sprites（圖片合并）技術(shù) 圖文介紹
眾所周知，減少網(wǎng)站加載時間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)。實現(xiàn)這一目標的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然后再用CSS2011-06-21- CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發(fā)表對該技術(shù)的 詳細闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個 14 Rules2011-08-02
- CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位2014-12-12
- 這篇文章主要介紹了CSS Sprite從大圖中截取小圖完整教程的相關(guān)資料,需要的朋友可以參考下2014-12-29