css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
css中精灵图是什么意思?
css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。
其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
怎么使用css精灵图(sprite)?
css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中,使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非标签。
在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。
使用精灵图的优点
1、减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
2、提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3、减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。
更多前端开发知识,请查阅 HTML中文网 !!
C语言中的static和extern关键字
因为在app开发中,定义网络链接或者设定常用变量时经常会用到一些C中的关键字,但很多同学只见其名而不知其意,今天就介绍2个开发中常用的C语言关键字。
1.staticstatic的作用
修饰局部变量:
1.延长局部变量的生命周期,程序结束才会销毁
2.局部变量只会生成一份内存,只会初始化一次
3.改变局部变量的作用域
写法:
//方法内部static修饰的变量
//不管调用与否,只会调用一次
- (void)staticTest
{
// static修饰局部变量
static int age = 0;
age++;
NSLog(@"%d",age);
}
//即调用两次该方法
//打印结果
//1
//2
修饰全局变量
1.只能在本文件中访问,修改全局变量的作用域,生命周期不会改
2.避免重复定义全局变量
写法:
// 全局变量:只有一份内存,
//所有文件共享,与extern联合使用。
// 写在方法外部
// static修饰全局变量
static int age = 20;
//调用
extern int age;
NSLog(@"%d",age);
//打印结果
//20
2.externextern作用:extern工作原理: