CSS фон URI данных не работает (Chrome)

Question

CSS фон URI данных не работает (Chrome)

Я пытаюсь вставить изображение в мою 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/2/

Я делаю что-то неправильно?

(пример источника: http://www.websiteoptimization.com/speed/tweak/inline-images/)

2

css data-uri

Источник

user66158 07 окт '12 в 10:04

1 ответ

Решение

Другие вопросы по тегам css data-uri

user827722 07 окт '12 в 10:15 2012-10-07 10:15 · Accepted Answer · 2012-10-07 10:15

Удалите все разрывы строк или пробелы из 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;
}