CSS中background-image【CSS Sprites,base64編碼】


CSS中,background可以設置對象的背景樣式。如顏色或者使用一張圖片代替,今天我要多說兩句的就是使用一張圖片的參數:image。准確的來說應該是background-image。我們可以這樣用它:

body{
            background-image: url(... .jpg);

}
       /* 也可以直接使用background 代替 */

body{
           background: url("....jpg");

}

css顯示圖片分3種,第一種是單純的顯示一個圖片;第二種稱之為CSS Sprites,也就是說把若干小圖片合成一個大圖片,然后通過background的postion參數實現效果,第三種是Inline images。這個方法不適用於IE瀏覽器。

CSS Sprites是一種把所有的圖片都以base64編碼以源代碼的形式寫在CSS文件里,格式是這樣的:data:[<mediatype>][;base64],<data>

data:URL標簽是在1995年第一次提出,按RFC2397規范的描述:它是"allows inclusion of small data items as 'immediate' data.(允許在頁面中包含一些小的即時數據)"。如一個內嵌的的圖片可以這樣引用:

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }
這段代碼可以在firefox瀏覽器運行。這行代碼的意思是,gif格式的以base64編碼成最后的字符串的圖片應用為背景。樣式應用的結果是一種斜條紋狀的背景。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM