css sprite responsive实现探究

在做web app前端设计时，为了减少http的请求，提高系统响应时间，有一个非常常见的优化措施是：将所有用到的静态的图片通过合并形成一个sprite.png，并且配合background-position和background-size来实现对图片部分区域的引用显示，从而基本满足了对应的诉求：减少http请求，但是能够正常定位使用。

但是问题是，一般地sprite工具产生出来的代码是根据图片的具体大小来定background-positon和background-size的对应参数，都是绝对值，当我们缩放viewport视窗大小时就不能正确引用到图片的正确部分了。要解决这个问题，必须使用相对百分比的参数数据，最后一通google，发现有一个网站非常好用。

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

我们看看他创建出来的几个文件：

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中的相关部分显示。