利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:
在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!
CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。
CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。

CSS Sprites优缺点的更多相关文章

  1. Css Sprites 多张图片整合在一张图片上

    CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...

  2. CSS Sprites的优缺点

    CSS Sprites在国内很多人叫css 精灵,是一种网页图片应用处理方式.就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image",&q ...

  3. CSS Sprites(CSS精灵) 的优缺点

    CSS Sprites 的优点:     1.减少图片的字节     2.减少了网页的http请求,从而大大的提高了页面的性能     3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命 ...

  4. CSS Sprites的概念、原理、适用范围和优缺点

    CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

  5. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  6. 神奇的CSS sprites,制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  7. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  8. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  9. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

随机推荐

  1. 如何通过JS调用某段SQL语句

    如何通过JS调用某段SQL语句,这样的需求在报表.数据平台开发中很常见.以报表平台FineReport开发为例,例如在点击某个按钮之后,来判断一下数据库条数,再决定下一步操作.那这在后台如何实现呢? ...

  2. MMORPG大型游戏设计与开发(服务器 AI 控制器)

    上一篇我们说了基础接口的组成,想必大家对AI中的基础方法有了一定的了解,而基础接口只能一个通用的,要实现不同的类别还需子类中实现,这就形成了玩家.主动.被动.木桩这些类型.不同类型的AI需要有一个统一 ...

  3. 移动电商时代、微分销商城O2O生活圈系统开发功能分析

    O2O生活圈系统的功能管理简单易用,随时随地发布新商品然后进行分类.管理,老少皆宜童叟无欺,实现多供应商多店铺经营模式的多层分润分销平台,满足企业自营商品与第三方供应商商品共存,打造京东+拍拍微店模式 ...

  4. mac 键盘映射 karabiner

    mac 键盘映射 karabiner 今天在vim编辑的时候觉得用mac的方向键有点麻烦 需要移动我的小右手,然后就搜个映射方案. 百度出来了 karabiner. 官网 安装什么的就不说了, 安完了 ...

  5. scheduletask任务调度

    1.导入jar包 2.创建entity. package cn.happy.entity; public class Plan { //时间 private String date; //任务 pri ...

  6. UNITY实现FLASH中的setTimeout

    setTimeout是一个很方便的DELAY处理方法 if (this.startUpDelay > 0){            StartCoroutine(DelayedStart()); ...

  7. 已知空间三个点,解算外接圆圆心坐标,C++编程实现

    struct PT3 { double x, y, z; }; int solveCenterPointOfCircle(std::vector<PT3> pt, double cente ...

  8. Win7 on VirtualBox 看不到 usb device

    sudo usermod -G vboxusers -a your_user_name 我的用上面指令不能建立, 需先使用 sudo su 切到root 再執行 usermod -G vboxuser ...

  9. logback logback.xml常用配置详解 <filter>

    <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之一.返回DENY,日志将立即被抛弃不再经过其他过滤器:返回NEUTRAL,有序列表 ...

  10. Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法

    在卸载或者重安装Infragistics NetAdvantage时候提示如标题的错误 win7下 1.打开注册表 Regedit 2.找到HKEY_LOCAL_MACHINE/SOFTWARE/Mi ...