不使用CSS圖像創建類似圖像效果的技術(通過CSS引入的背景圖像,不包括img標記中的圖像);換句話說,使用純CSS生成類似圖像效果的技術。
首先,我們通過統計查看新浪主頁的最新版本,得到樣式表文件(CSS文件)大小為206.8K,CSS圖像大小為623.8K。
CSS Image由一系列圖片組成,每個圖片都包含最小的箭頭,您需要保存為一張圖片并占用1KB的空間。
如果我們以CSS的形式來模擬小箭頭,那么空間資源將占據多少讓我們來計算一下。首先,粘貼代碼。
CSS文件中有至少200個字符。如果計算一個字符等于1B,則200個字符大約等于0.2KB,這節省了下載資源的時間,并且大大減少了請求資源的大小。明顯減少了HTTP請求的數量,增加了頁面大小。如果使用CSS而不使用圖片技術,則只需要更改CSS屬性即可實現效果并提高代碼的可維護性。
大致有四種方法:一種是通過背景色和邊框生成圖片;另一種是通過字符生成圖片;第三種是通過CSS3漸變等生成圖片(這考慮到了低級瀏覽器的不兼容性);圖片從CSS3的自定義字體(@字體臉)。
1 使用CSS的背景顏色和邊框屬性,可以生成一些圖形,比如三角形,純CSS2的內容可以完全與IE6兼容。
2 字符生成的圖像,如尖角、圓點和箭頭,也是與ie6完全兼容的CSS2類別。
3 CSS3生成圖像,使用CSS3的新屬性,如方框陰影、邊界半徑、梯度梯度來生成圖形。在IE瀏覽器中使用梯度背景需要IE梯度過濾器,但是過濾器資源的使用會消耗很多,所以,要根據項目的實際情況來權衡是否使用過濾器。Google搜索按鈕不使用過濾器,IE瀏覽器不做梯度處理,大家都知道Google很關注性能的公司,有時為了表現最佳,犧牲一點視覺體驗是可以接受的。
4 CSS3的自定義字體(@字體臉)生成圖片。雖然這種方法并不真正意味著沒有圖片,但它很容易編輯和維護。更重要的是,它的大小和顏色可以由CSS控制,間接地減少了圖片的使用。
簡言之,CSS無圖片技術是一個概念,我們需要在寫作中形成CSS風格,在實際項目中權衡利弊靈活運用無圖片技術做一些合理有效的改進優化。