我找到了非常有用的工具来创建响应式精灵图像。 http://responsive-css.spritegen.com/
不幸的是，精灵被生成为img标签并创建自己的HTTP请求。 有没有任何优雅的方法如何使用background-image属性做响应式CSS精灵？
答案 0 :(得分：3)
是的，请使用数据网址。图像位可以直接嵌入样式表中。您还可以将data-url嵌入到图像标记的src属性中。
在样式表中，它看起来像这样：
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)
这是2x3透明png图像的数据网址图像（仅举例来说 - 它很小）。
data-urls使精灵过时 - 你可以嵌入多个数据网址而不是一个精灵，并且没有额外的http调用（实际上，它是一个 less ）。
您可以轻松地从现有图像生成一个。这是一个在线工具：http://dataurl.net/#dataurlmaker