不使用CSS圖像創(chuàng)建類似圖像效果的技術(shù)(通過CSS引入的背景圖像，不包括img標(biāo)記中的圖像);換句話說，使用純CSS生成類似圖像效果的技術(shù)。

　　首先，我們通過統(tǒng)計(jì)查看新浪主頁的最新版本，得到樣式表文件(CSS文件)大小為206.8K，CSS圖像大小為623.8K。

　　CSS Image由一系列圖片組成，每個(gè)圖片都包含最小的箭頭，您需要保存為一張圖片并占用1KB的空間。

　　如果我們以CSS的形式來模擬小箭頭，那么空間資源將占據(jù)多少讓我們來計(jì)算一下。首先，粘貼代碼。

　　CSS文件中有至少200個(gè)字符。如果計(jì)算一個(gè)字符等于1B，則200個(gè)字符大約等于0.2KB，這節(jié)省了下載資源的時(shí)間，并且大大減少了請(qǐng)求資源的大小。明顯減少了HTTP請(qǐng)求的數(shù)量，增加了頁面大小。如果使用CSS而不使用圖片技術(shù)，則只需要更改CSS屬性即可實(shí)現(xiàn)效果并提高代碼的可維護(hù)性。

　　大致有四種方法：一種是通過背景色和邊框生成圖片;另一種是通過字符生成圖片;第三種是通過CSS3漸變等生成圖片(這考慮到了低級(jí)瀏覽器的不兼容性);圖片從CSS3的自定義字體(@字體臉)。

　　1 使用CSS的背景顏色和邊框?qū)傩裕梢陨梢恍﹫D形，比如三角形，純CSS2的內(nèi)容可以完全與IE6兼容?！?/p>

  　  2  字符生成的圖像，如尖角、圓點(diǎn)和箭頭，也是與ie6完全兼容的CSS2類別。

　　3  CSS3生成圖像，使用CSS3的新屬性，如方框陰影、邊界半徑、梯度梯度來生成圖形。在IE瀏覽器中使用梯度背景需要IE梯度過濾器，但是過濾器資源的使用會(huì)消耗很多，所以，要根據(jù)項(xiàng)目的實(shí)際情況來權(quán)衡是否使用過濾器。Google搜索按鈕不使用過濾器，IE瀏覽器不做梯度處理，大家都知道Google很關(guān)注性能的公司，有時(shí)為了表現(xiàn)最佳，犧牲一點(diǎn)視覺體驗(yàn)是可以接受的。

　　4 CSS3的自定義字體(@字體臉)生成圖片。雖然這種方法并不真正意味著沒有圖片，但它很容易編輯和維護(hù)。更重要的是，它的大小和顏色可以由CSS控制，間接地減少了圖片的使用。

　　簡(jiǎn)言之，CSS無圖片技術(shù)是一個(gè)概念，我們需要在寫作中形成CSS風(fēng)格，在實(shí)際項(xiàng)目中權(quán)衡利弊靈活運(yùn)用無圖片技術(shù)做一些合理有效的改進(jìn)優(yōu)化。