響應式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精靈與背景圖像屬性

回答

相關問題