当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS Sprites技术

时间:2013-03-02 03:41来源:未知 作者:admin 点击:

标签:CSS Sprites技术 CSS(655)技术(20)3.CSSSprites(1)维护(9)Sprites(9)
3.CSSSprites在维护的时候比较麻烦,sprites是普通双刃剑,如果页面背景有少许修改,个别就要改这张合并的图片,无需改的地方最好不要动,这样防止改动更多的css,如果在本来的处所放不下,有只能(最好)往下加图片,这样图片的字节就增添了,由于每次的图
CSS Sprites技术》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331L2013.htm


  3.CSS Sprites在维护的时候比较麻烦,sprites是普通双刃剑,如果页面背景有少许修改,个别就要改这张合并的图片,无需改的地方最好不要动,这样防止改动更多的css,如果在本来的处所放不下,有只能(最好)往下加图片,这样图片的字节就增添了,由于每次的图片改动都得往这个图片删除或增加内容,显得略微繁琐,而且从新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事件。当然,在性能的口号下,这些都是可以战胜的。


  实例一:淘宝频道页面导航


  后果图:


  4,CSS Sprites图片合并技术减少请求优缺点.因为图片的位置需要固定为某个相对数值,这就失去了诸如center之类的机动性。

CSS Sprites总结
  性能压倒所有。CSS Sprites十分值得学习和利用,特殊是页面有一堆ico(图标)。总之良多时候大家要衡量一下利弊,在决议是不是运用CSS ,css reset重置基础代码;Sprites。为坚持兼容性跟保护性,sprites图片中的各个局部保持必定的间隔是一种不错的做法。

 


CSS Sprites应用


  sprites图:



CSS Sprites优点


 




  sprites图:


  2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其余工具丈量盘算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐,CSS position属性定位总结;不外网上已经有高手开发出“CSS Sprites 款式天生工具”,大家可以尝试一下。


  效果图:



 


  在这方面,淘宝网做的比拟好,我就以淘宝网为例吧。

Tag:技术     技巧    

  实例二:淘宝首页


  CSS ,CSS opacity-实现图片半透明效果;Sprites为什么忽然跑火,跟可能晋升网站机能有关。不言而喻,这是它的宏大长处之一。

--> [网站建设之]CSS Sprites技术

CSS Sprites简介

 


  通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案,阿里巴巴各子公司的网页中到处都可发明css sprites 的影子。但CSS Sprites并不是什么清规戒律,CSS Hack和向后兼容的常见问题,但在许多情况下,它有着一定的上风,最主要的是它可以减轻服务器的负载,进步网页加载速度。跟着Web设计向着精巧、奇妙的方向发展,设计师们开端斟酌应用非Javascript的方 式制造鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。
  说白了,CSS Sprites实在就是把网页中一些背景图片整合到一张图片文件中,再应用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position能够用数字能准确的定位出背景图片的地位,CSS hack区分不同浏览器的写法
  当页面加载时,不是加载每个独自图片,而是一次加载全部组合图片。这是一个了不起的改良,它大大减少了HTTP恳求的次数,减轻服务器压力,同时缩短了悬停加载图片所须要的时光延迟,使效果更流利,不会停顿。


  2.个人以为CSS Sprites能减少图片的字节,我曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

CSS Sprites毛病


  1,CSS hack兼容性一览表.在图片合并的时候,你要把多张图片有序的公道的合并成一张图片,还要留好只够的空间,避免板块内不会呈现不用要的背景,否则可能会涌现出现烦扰图片的情形;这些还好,做苦楚的是在宽屏,高辨别率的屏幕下的自适应页面,你的图片假如不够宽,很轻易出现背景断裂;


  诚然CSS Sprites是如斯的强盛,然而也存在一些不可疏忽的缺陷。


  1,CSS Hack兼容各浏览器是否正常.利用CSS Sprites能很好地减少了网页的http要求,css hack 记录,从而大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被普遍传布和应用的重要起因;


(责任编辑:网站建设)
CSS Sprites技术相关文章
上一篇:CSS Sprites图片合并技术减少请求优缺点 下一篇:CSS Sprites技术以及图片优化
回到顶部