html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...

让你显示一个天气图标你会怎么显示呢？让你做一个简单的动图你会怎么采用什么方式呢？让你输出一个长期固定的图标列表你会怎么编写代码呢？

如果不管性能，不用css，不用js，可能你会这么写html：

类似这样便是最原始的图片序列编写方式。然而即使有emmet加持，这种编写仍然费功夫而且浏览器的请求次数变多，网页更容易延迟。而使用精灵图的方法则可以更高效解决上述问题。

介绍一下精灵图：就是把多张小图片拼接成一张大图片，通过定位，设置X，Y轴坐标的值，并让超出部分隐藏，这样就可以显示图片的局部，也就是我们想要的部分，这样做有利于页面优化，当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。所以对于小图标列表表单来说，精灵图是一个是十分舒服的一种方式。

用css 定义一个4排的图标阵列。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，一堆图标只用请求一次。，background-position 可以用数字精确的定位出背景图片的位置。

网络上的精灵图

然后通过JavaScript改变不同不同位置的显示，就有点像放着一个相框和一个背景，然后每移动一次背景，在相框中可以看到不同的图像。

JavaScript编写如下

通过循环改变图片显示的不同坐标，起到了“移动背景布”的作用。

最后输出结果类似这样：

CSS Sprites 看上去十分愉快，同上面的html简单方法显示一样，能很好地减少网页的http请求，从而大大的提高页面的性能，而代码也简洁大方。

而比如天气图标也可以这样修改。让精灵图包括晴雨雪等图标，然后当传入天气信息时便可以改变。

还有rpg游戏中的人物移动时的图片变换，都可以使用这种办法。

关键词：html+css+js 精灵图

html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...相关推荐

css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示
以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小. 这种效果应该怎么实现呢? 高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS .bg { ...
h5页面背景图在移动端不显示
a{ background: url('../img/bg.png') repeat-y ; background-size: 100%; width: 100vw} 在移动端页面过长不显示背景图修 ...
iPad谷歌浏览器怎么开摄像头_谷歌浏览器书签栏怎么显示_谷歌浏览器显示书签栏步骤...
通常在浏览器中,会显示书签栏,方便我们添加或查找一些常用网址,但是很多用户在使用谷歌浏览器的时候,却发现没有书签栏,这是因为被隐藏了,只要手动设置一下就可以显示了,那么谷歌浏览器书签栏怎么显示呢?接下 ...
小程序背景图满屏_手机秒变闪屏弹幕，撩妹小程序，赶快来学！
想表白说不出口怎么办? 碰到心仪的小姐姐想要她的微信,说不出口怎么办? 去机场接机,还需要准备个手写牌? 演唱会上,少了LED灯牌?-- 这些都不是问题,只要你有一把智能手机! 小姐姐发现的这款『闪屏 ...
计算机怎么换背景图片,电脑开机背景图怎么换_怎么设置开机背景的教程
最近有不少朋友问小编电脑开机背景图怎么换的问题,对于怎么设置开机背景的问题,相信还有很多朋友不太明白,有时候我们感觉系统自带的开机背景图片不好看,不符合我们的审美,想要换成我们喜欢的开机背景图,那么应 ...
手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
html鼠标放上虚化背景图片,如何将网页CSS背景图高斯模糊且全屏显示
高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS.bg { background-image:url(scale.jpg); -moz-background-size: 100% ...
微信小程序页面添加背景图，图片全屏显示
前言微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...

html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...

html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...相关推荐

最新文章

热门文章