如何将按钮的背景图像设置为 ie 9+ 中的 base64 编码图像？答案

【问题标题】：How to set background image of a button to a base64 encoded image in ie 9+?如何将按钮的背景图像设置为 ie 9+ 中的 base64 编码图像？
【发布时间】：2018-09-27 04:02:00
【问题描述】：

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

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

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

请注意，所有谷歌搜索结果都显示了如何支持 IE8+ 或 svgs，而我希望在 IE9 中支持 base64 数据 URI。

【问题讨论】：

@mplungjan 我不需要支持ie7及以下，只支持ie9及以上
@mplungjan 和 IE 11 工作
可能使用相同的方法 - 我认为 IE10 不是

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

【解决方案1】：

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

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

【讨论】：