svg + xml base64 url​​编码的firefox问题，内容：url（）;

Question

该解决方案可在Chrome上运行，但不再适用于FF和IE。

我已将svg更改为base64和url编码，就像我在其他主题上阅读的一样。

在img标签中，svg可以正常工作，但是当我在content: url();使用它时content: url(); 它不起作用。

这是小提琴

#someDiv {
    content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTU0LjgtOTcuNGExOTAuNjYsMTkwLjY2LDAsMCwwLTM4LjcsNi4zVjI4OC42YTE5NS4xMiwxOTUuMTIsMCwwLDAsNTAuNCw2LjYsMTk2Ljc0LDE5Ni43NCwwLDAsMCw1NS4xLTcuOXYtMzc3YTE5NC4zOCwxOTQuMzgsMCwwLDAtNDMuMy03LjZIMTU0Ljh2LTAuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzYuMywyOTIuOGEyMDIsMjAyLDAsMCwwLDMwLjMsMi4zLDE5My44NiwxOTMuODYsMCwwLDAsMzMuNC0yLjlWLTk0LjlhMTkyLjg5LDE5Mi44OSwwLDAsMC0yMS42LTIuNUgxNTVhMTgzLjY2LDE4My42NiwwLDAsMC0xOC41LDJWMjkyLjhoLTAuMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0tMjkuNyw5OC43QTIwMy4zMiwyMDMuMzIsMCwwLDAtMjcsMTMxLjFIMzYwLjFhMTkyLjMyLDE5Mi4zMiwwLDAsMCwyLjctMzIuNCwyMDUuNDIsMjA1LjQyLDAsMCwwLTEuMy0yMi4zSC0yOC40QTIwMy45NCwyMDMuOTQsMCwwLDAtMjkuNyw5OC43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjwvc3ZnPg==');
    display: block;
    width: 259px;
    height: 243px;
}  

Answer 1

在CSS 2 Specification中，内容仅适用于：before和：after伪元素。 Firefox确实实现了这一点

 #someDiv::before { content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+=='); display: block; width: 259px; height: 243px; 

 <div id="someDiv"></div> 

CSS 3生成的内容模块第3级将其扩展为直接应用于元素，但是该规范仍然是有效的草案。 简介包含文字

这是一个非常粗糙的草案，尚未准备好实施。

因此，浏览器的实现参差不齐也就不足为奇了。