具有background-image属性的自适应CSS Sprite [英] Responsive CSS sprites with background-image property

问题描述

我发现了用于创建响应式精灵图像的非常有用的工具. 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！