什么是精灵图?css Sprites怎么用?
2017-09-07 15:13
1021 查看
一、什么是css sprites
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。 css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
二、什么时候适合用DIV CSS sprites拼合布局
适合:一般小图标素材小的图标ico类素材,一般图标很小十多像素几十像素的宽度高度,这种适合拼合成一张图实现sprites
background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数,但很快加载完又会释放。
不适合:大图大背景
大背景一般用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来使用css
sprites背景定位布局。
sprites适合推荐小结
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。
三、div css sprites优势与缺点劣势判断选择
优势:加快网页加载速度
浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染
后期维护简单
该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,直接生成代码,简单易用
缺点:
在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;
四、如何使用css Sprites
1、下载css Sprites2、用ps把需要拼合的图片切下来
3、打开css Sprites
打开自己要的多张小图片
排列好图片的顺序
在排列的时候,我们就会看到下面已经自动出现了图片定位代码。
在排列好之后直接保存即可。
4、保存精灵图
相关文章推荐
- 过敏性鼻炎吃什么药好?怎么养?
- 嵌入式 probe()函数是什么时候被调用,设备和驱动是怎么联系起来的
- java中collection是什么?怎么理解?怎么使用?
- 什么是php二次开发,php是怎么做二次开发?
- wifi是什么 手机wifi怎么用来上网?
- 【我来解惑】.Net应该学什么怎么学(一)
- 怎么签购房合同 签购房合同要注意什么
- 神奇的Haskell——“做什么”而不是“怎么做”
- location.search是什么意思?怎么用?
- 【我来解惑】.Net应该学什么怎么学(二)
- 什么是 JavaScript?你该怎么执行它
- 【网虫】怎么知道网站是什么线路的?
- 什么是DNS,怎么用虚拟机搭建DNS服务器
- 什么是嵌入式?嵌入式开发怎么学
- W5100E01-AVR是什么?怎么用?(四)(用户手册V1.0版)
- 函数是什么及怎么定义、怎么使用
- NSSet是什么对象, 怎么用
- 怎么查看apache端口被什么程序占用了
- 神经网络中的「注意力」是什么?怎么用?
- Docker大书房:什么是Docker?怎么用?