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
- css
/* 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 相对|绝对(relative/absolute)定位系列(一)
- 技术分享 | Web测试方法与技术之CSS讲解
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- 谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
- 【Css】div或按钮鼠标经过或鼠标点击后效果样式(图文+示例)
- 【Html/Css】Https证书申请、安装和使用(新手IIS安装参考)
- 【Css】针对logo头像实现的示例
- 每日一学—CSS overflow与text-overflow与white-space属性
- css垂直对齐
- CSS Reset & Modern CSS Reset
- 带你走进CSS定位详解
- DIV+CSS规范命名大全集合
- CSS 实现背景图尺寸不随浏览器缩放而变化
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——第2章 准备好工具 2.1网站剖析
- 实现动画之CSS与JavaScript对比
- HTML + CSS实现图片3D旋转效果
- 【如何用简单的几行CSS实现自定义的滚动条】
- css实现缺角的几种方法
- 用HTML CSS JS 实现一个工作招聘平台展示响应式网站
- 两行css代码实现瀑布流:html,css最简单的瀑布流实现方式
- Vue之动态绑定CSS样式
- CSS实现完美垂直居中
- CSS中的before和:after伪元素深入理解
- CSS样式:max-height和overflow auto始终显示垂直滚动条
- css实现容器(宽高不等的)内部自适应的正方形