响应式CSS精灵与背景图像属性

我发现非常有用的工具来创建响应精灵图像。 http://responsive-css.spritegen.com/响应式CSS精灵与背景图像属性

不幸的是，精灵被生成为img标签并创建自己的HTTP请求。有没有任何优雅的方式如何做与背景图像属性的响应式CSS精灵？

2014-03-26 xtomeek

是的，使用数据网址。图像位可以直接嵌入到样式表中。您也可以将data-url嵌入到图片标签的src属性中。

在样式表中，它看起来像这样：

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)

这是一个2×3透明的PNG图像数据的URL背景图片（只是举例 - 这是小）。

数据url使精灵过时 - 你可以嵌入多个数据url而不是一个精灵，并且没有额外的http调用（实际上，它是一个减去）。

您可以从现有图像轻松生成一个。这里有一个在线工具：http://dataurl.net/#dataurlmaker

来源

2014-03-26 09:11:38 Faust

浏览器计数数据：image/png作为http请求还是不是？我可以在列表中看到它在chrome中的数据请求，但是我看不到这个处理/等待的时间。 – xtomeek

它不会*为数据url创建一个http请求。 Chrome开发者工具会将其列在网络标签中，但请放心，该资源不会往返服务器。 – Faust

太好了，谢谢澄清 – xtomeek

响应式CSS精灵与背景图像属性

回答

相关问题