2012-07-09 59 views
7

是否有可能将base64背景图像放在多行而不是一个长行?如果是这样,怎么样?Base64多行背景图片?

我现在的身体CSS是:

body { 
    background-color: #FFFFFF; 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVBhXY/iABP4jAQYqSiCbi2wsA/UkAIeAuaFCb0TzAAAAAElFTkSuQmCC); 
    background-repeat: repeat; 
    height: 100%; 
} 
+0

你为什么不试试在单独的行中打破你的base64数据?你没有附加引号或任何内容,所以只要在某处插入\ n即可。 – Cyrille 2012-07-09 15:29:33

+0

@Cyrille - 因为'\ n'(一个新行分隔符)还不够 - 见下面的答案。 – 2012-07-09 15:37:29

+0

没有阅读过任何你曾尝试过的内容;)很高兴你找到了解决方案。 – Cyrille 2012-07-09 15:38:05

回答

18

把引号之间的代码,并打破之前新线放一个反斜杠。

body { 
    background-color: #FFFFFF; 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg\ 
    AAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQ\ 
    U1BAACxjwv8YQUAAAAJcEhZcwAADs\ 
    MAAA7DAcdvqGQAAAAZSURBVBhXY/iABP4j\ 
    AQYqSiCbi2wsA/UkAIeAuaFCb0TzAAAAAElFTkSuQmCC'); 
    background-repeat: repeat; 
    height: 100%; 
} 
+1

谢谢您的及时答复。 – 2012-07-09 15:36:18

+0

@Ωmega不客气。 – 2012-07-09 15:37:22

+0

这会导致Firefox的CSS规则检查器中断。即使页面正常渲染,开发人员工具也会在Firefox 57中崩溃。 – 2018-01-05 14:13:53