问题
I found very useful tool for creating the responsive sprite images. http://responsive-css.spritegen.com/
Unfortunately the sprites are generated as img tags and create own HTTP request. Is there any elegant way how to do responsive CSS sprites with background-image property?
回答1:
Yes, use a data-url. The image-bits can be embededed directly in your stylesheet. You could also embed the data-url in the src property of an image tag.
In a stylesheet, it looks like this:
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)
That's a data-url bg image for a 2x3 transparent png image (just for example -- it's small).
data-urls make sprites obsolete -- you can embed multiple data-urls instead of one sprite, and there are no extra http calls (in fact, it's one less).
You can easily generate one from an existing image. Here's an online tool: http://dataurl.net/#dataurlmaker
来源：https://stackoverflow.com/questions/22655953/responsive-css-sprites-with-background-image-property