如何将按钮的背景图像设置为9+以上的base64编码图像?

时间:2018-04-17 08:57:12

标签: html css internet-explorer-9 data-uri

我的网页上有一个按钮,我想将其背景图像设置为base64编码数据URI,如下所示:



<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(&quot;data:image/png;base64, Qa=...;);"></button>
&#13;
&#13;
&#13;

上面的按钮适用于chrome,Firefox和IE11,但不适用于IE9。按钮显示但未显示背景图像。那么如何让它在IE9中运行?

请注意,所有谷歌搜索结果都显示了如何支持IE8 +或svgs,我想要的是支持IE9和base64数据URI。

1 个答案:

答案 0 :(得分:1)

根据https://caniuse.com/#feat=datauri,数据URI可以在IE8及更高版本中使用,但需要注意的是,对于IE8,最大URI长度为32KB。这应该像在IE11中一样在IE9中工作,但是不要使用&quot;并确保在第一个逗号之后或值中的任何其他位置没有空格:

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC);"></button>