具有背景图像属性的响应CSS精灵

我发现了一个非常有用的工具，可以用来创建响应灵敏的精灵图像。

不幸的是，精灵被生成为img标记，并创建自己的HTTP请求。

---

有什么优雅的方法可以使用背景图像属性创建响应性CSS精灵吗？

是的，使用数据url。图像位可以直接嵌入到样式表中。您还可以将数据url嵌入图像标记的src属性中

在样式表中，它如下所示：

    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)

这是2x3透明png图像的数据url bg图像（例如，它很小）

数据URL使精灵过时——您可以嵌入多个数据URL而不是一个精灵，并且没有额外的http调用（事实上，它少了一个）

---

您可以轻松地从现有图像生成一个。这里有一个在线工具：

浏览器是否将数据：image/png计算为http请求？我可以在chrome中的数据请求列表中看到它，但我看不到它处理/等待的时间。它不会对数据url发出http请求。Chrome开发者工具会在网络选项卡中列出它，但请放心，该资源不会往返于服务器。