Responsive CSS sprites with background-image prope

2019-06-06 22:59发布

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条回答
Melony?
2楼-- · 2019-06-06 23:43

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

查看更多
登录 后发表回答