I'm trying to embed an image into my css directly as encoded data:
我正在尝试将图像直接嵌入到我的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;
But, it fails. What's even more weird is that embedding the data URI directly into an image tag does work:
但是,它失败了。更奇怪的是,将数据URI直接嵌入到图像标记中确实有效:
You can check my example out at: http://jsfiddle.net/cAb2y/1/
你可以查看我的例子:http://jsfiddle.net/cAb2y/1/
Am I doing something wrong?
难道我做错了什么?
(source example: http://www.websiteoptimization.com/speed/tweak/inline-images/)
(来源示例:http://www.websiteoptimization.com/speed/tweak/inline-images/)
1 个解决方案
#1
8
Remove all of the line breaks or spaces from the Data URI:
从数据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
8
Remove all of the line breaks or spaces from the Data URI:
从数据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;
}