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

Question

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

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

上面的按钮在 chrome、Firefox 和 IE11 中有效，但在 IE9 中无效。该按钮正在显示，但未显示背景图像。那么如何让它在 IE9 中工作呢？

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

Answer 1

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

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