CSS Sprites在国内很多人叫css 精灵,是一种网页图片应用处理方式。就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样处理图片后,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites的优点:

  1、减少图片的字节
     2、减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点。
     3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
     4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

CSS Sprites 的缺点:
     1、在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
    2、CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

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

  1. CSS Sprites优缺点

    利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...

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

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

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

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

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

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

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

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

  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. unity xml序列化与反序列化 多平台

    换平台确实是一个头疼的问题,本来在pc用.net的json处理数据很是顺手的,但是发布web版本后,发现他不支持.后面找了好几个开源json都不能很好的支持web,或者不能支持List等.于是我就想着 ...

  2. 【5】-阿里面试题android网络图片加载优化

    题目: 遇到网络不好,卡顿的时候如何对网络的加载图片进行优化? 思路: 从加载的图片的本身和手机的存储两方面考虑 解决办法: 1.找现有图片格式的替换者 在众多的图片格式中,选择了Google的Web ...

  3. DTN学习,theONE模拟器网络相关资料整理

    下面是一个百度空间的: http://hi.baidu.com/jensenliao 博客园的一篇博客:theONE模拟器简介(主要讲述,软件配置,软件结构) http://www.cnblogs.c ...

  4. M1卡区块控制位详解

    M1卡区块控制位详解 Mifare 1S50/Mifare 1S70 每个扇区的密码和存取控制都是独立的,可以根据实际需要设定各自的密码及存取 控制.存取控制为4个字节,共32位,扇区中的每个块(包括 ...

  5. sqlplus 分析执行计划

    转载 http://xm-koma.iteye.com/blog/1048451 对于oracle9i,需要手工设置plustrace角色,步骤如下: 1.在SQL>connect sys/密码 ...

  6. 17.QT-事件处理分析、事件过滤器、拖放事件

    Qt事件处理介绍 Qt平台会将系统产生的消息转换为Qt事件 Qt事件是一个QEvent的对象 Qt事件用来描述程序内部或外部发生的动作 任意的QObject对象都具备事件处理的能力 Qt常见的事件继承 ...

  7. MySQL MEB常见用法

    1. 备份成镜像 备份: ./mysqlbackup --socket=/usr/local/mysql-advanced--linux-glibc2.-x86_64/data/mysql.sock ...

  8. 说说Android的MVP模式

    http://toughcoder.NET/blog/2015/11/29/understanding-Android-mvp-pattern/ 安卓应用开发是一个看似容易,实则很难的一门苦活儿.上手 ...

  9. HashMap在高并发下如果没有处理线程安全会有怎样的安全隐患,具体表现是什么

    Hashmap在并发环境下,可能出现的问题: 1.多线程put时可能会导致get无限循环,具体表现为CPU使用率100%: 原因:在向HashMap put元素时,会检查HashMap的容量是否足够, ...

  10. Java并发-任务执行

    大多数的应用程序都是围绕"任务执行"来构造的:任务常常是一些抽象的并且离散的工作单元.我们把应用程序的工作分解到多个任务中,可以简化程序的组织结构,提供一种自然的事物便捷来优化错误 ...