css sprite responsive to realize inquiry

In doing web app front-end design, in order to reduce http requests, improve system response time, there is a very common optimization measures are: all use static images to form a sprite.png by merging, and with the background-position and background-size to achieve the reference picture displaying the partial region, so as to substantially meet the demand corresponding to: reduce the http request, it is possible to use the normal positioning.

But the problem is, the code is generally generated sprite tool is to set out the background-positon and background-size corresponding parameters depending on the size of the picture, is an absolute value, when we zoom viewport window size can not be properly referenced to pictures the correct part. To solve this problem, you must use the relative percentage of parameter data, and finally through a google, found a site very easy to use.

https://responsive-css.spritegen.com/

We look he created out of several files:

sprite.png

/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
 
.sprite-comming, .sprite-javascript, .sprite-mysql, .sprite-php, .sprite-c, 
.sprite-html5, .sprite-css, .sprite-es6, .sprite-svg
{ max-width: 100%; background-size: 100%; background-image: url('image/sprite-homepage.png'); }
 
.sprite-comming { background-position: 0 0%; background-size: 100%; }
.sprite-javascript { background-position: 0 18.475992%; background-size: 166.666667%; }
.sprite-mysql { background-position: 0 32.50497%; background-size: 166.666667%; }
.sprite-php { background-position: 0 41.690962%; background-size: 166.666667%; }
.sprite-c { background-position: 0 53.02714%; background-size: 187.265918%; }
.sprite-html5 { background-position: 0 68.68476%; background-size: 234.741784%; }
.sprite-css { background-position: 0 80.15873%; background-size: 250%; }
.sprite-es6 { background-position: 0 90.079365%; background-size: 250%; }
.sprite-svg { background-position: 0 100%; background-size: 250%; }

html样例

<img class="sprite-comming" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFiAQMAAAA6J7iXAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAACxJREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAADwZliAAAEo8C0hAAAAAElFTkSuQmCC">
<img class="sprite-javascript" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAACJJREFUeNrtwTEBAAAAwqD1T20KP6AAAAAAAAAAAAAAAHgZLbQAAQGVUwQAAAAASUVORK5CYII=">
<img class="sprite-mysql" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADMAQMAAADzgAwAAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAB5JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAfBofFAABXk9aoAAAAABJRU5ErkJggg==">
<img class="sprite-php" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACeAQMAAACyxqX8AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAPBvGBIAAbYBrj0AAAAASUVORK5CYII=">
<img class="sprite-c" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAAEsAQMAAADuMgSfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAACFJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAA/gwpBAAB2aJ1WAAAAABJRU5ErkJggg==">
<img class="sprite-html5" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAAEsAQMAAABuZGSlAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAB9JREFUeNrtwTEBAAAAwqD1T20ND6AAAAAAAAAAAL4MINAAAe7OV0sAAAAASUVORK5CYII=">
<img class="sprite-css" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwYEAAAAAw6D5U1/hAFUBAAAAAHwGFFAAAcRa5isAAAAASUVORK5CYII=">
<img class="sprite-es6" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwYEAAAAAw6D5U1/hAFUBAAAAAHwGFFAAAcRa5isAAAAASUVORK5CYII=">
<img class="sprite-svg" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwYEAAAAAw6D5U1/hAFUBAAAAAHwGFFAAAcRa5isAAAAASUVORK5CYII=">

上面产生的代码中，我们唯一需要理解一下的是html样例中的img标签为什么src属性中还有 data:image/png;base64 样式的图片嵌入呢？我们知道如果是通过data-uri方式嵌入的化就没有必要在css中通过background-image来引用sprite.png了，这里到底有什么玄机呢？

我们来看看devtool中显示的那些图片data:image/png到底都是啥，

原来啊，这个data:image/png的引用仅仅是和原图片大小相同的透明图片，这也可以从该base64字符串都非常短小可以部分印证。这些透明的dummy图片和sprite.png一样会被缓存，真正实质上的http图片引用只有一个sprite.png文件。在正常显示时，由于img的src为一定大小的dummy透明图片，真正显示的结果就由其background-image来决定，而这就是sprite.png中的相关部分显示。

css sprite responsive to realize inquiry

Guess you like