LOGO logo

需求 开发 交付;每一步修改到满意后在付款。

下载到桌面 免费获取解决方案
当前位置: 网站建设/ 企业网站制作/ 企业网站制作中Css Sprite技术有什么作用

企业网站制作中Css Sprite技术有什么作用

日期:2021-04-16 16:25 浏览量:278

Css Sprite技术在企业网站制作中有什么作用?要了解这个,先了解下网页打开的原理,当用户访问某个url网页的时候,服务器会把网页的内容返回给用户浏览器,浏览器解析后一个网页里面有N多个连接,如图片、css、js等会再次发送请求,每次请求就是一个连接,而Css Sprite就是减少请求连接数的作用


这么说可能还是比较专业无法理解,如果每次请求当成用户去某个地方拿东西,而利用Css Sprite技术就是建设用户的跑腿次数,提高网页的打开速度。


一、什么是css sprites

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。


css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。


1、sprites优势:


若干小图标拼合成一张图后布局,减少http iis请求数,对于大战大流量网站来说隐形优势很显然的,从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵,使用CSS Sprites这样可以大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,同时也减少图片文件数目。


2、sprites缺点


在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;


CSS Sprites在开发的时候比较麻烦,你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;


CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情


由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。


热门文章
友情链接