问题描述
我发现了用于创建响应式精灵图像的非常有用的工具.http://回应-css.spritegen.com/
I found very useful tool for creating the responsive sprite images.http://responsive-css.spritegen.com/
不幸的是，这些精灵被作为img标签生成并创建了自己的HTTP请求.有什么优雅的方法如何使用background-image属性做响应式CSS精灵?
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?
推荐答案
是的，请使用数据网址.图像位可以直接嵌入到样式表中.您也可以将data-url嵌入图像标签的src属性中.
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==)
这是2x3透明png图像的数据URL bg图像(例如，它很小).
That's a data-url bg image for a 2x3 transparent png image (just for example -- it's small).
data-urls使sprite变得过时了-您可以嵌入多个data-url而不是一个sprite，并且没有多余的http调用(实际上，它是一个 less ).
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).
您可以轻松地从现有图像生成图像.这是一个在线工具: http://dataurl.net/#dataurlmaker
You can easily generate one from an existing image. Here's an online tool: http://dataurl.net/#dataurlmaker
这篇关于具有background-image属性的自适应CSS Sprite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！