CSS背景数据URI不起作用（Chrome）答案

【问题标题】：CSS background Data URI not working (Chrome)CSS背景数据URI不起作用（Chrome）
【发布时间】：2012-10-07 10:04:57
【问题描述】：

我正在尝试将图像作为编码数据直接嵌入到我的 css 中：

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/）

【问题讨论】：

标签： css data-uri

【解决方案1】：

从数据 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;
}

【讨论】：