2012-10-07 98 views
2

我試圖嵌入圖像到我的CSS直接作爲編碼數據:CSS背景數據URI不工作(鉻)

background:#fae url("data:image/gif;base64, 

    R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jv 
    b29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP// 
    mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Eky 
    ky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCm 
    TIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr 
    7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7") 

    no-repeat; 

但是,它失敗。什麼是更奇怪的是,直接嵌入數據URI成圖像標籤確實工作:

您可以檢查我的例子出來:http://jsfiddle.net/cAb2y/1/

難道我做錯了什麼?

(源例如:http://www.websiteoptimization.com/speed/tweak/inline-images/

回答

8

刪除全部從數據URI的換行或空格的:

h3 { 
    width:50px; 
    height:50px; 
    display:block; 
    border:2px red solid; 
    background:#fae url("data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7") no-repeat; 
}​ 
+1

作爲承諾。 ;)並歡迎來到Stackoverflow! – Kriem