CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。

优点:

它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

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

CSS Sprites能减少图片的字节。

CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。

CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点:

图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。

图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。

图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。

可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。

CSS sprites的更多相关文章

  1. CSS Sprites优缺点

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

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

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

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

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

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

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

  5. CSS Sprites+CSS3 Icon Font

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

  6. 使用CSS sprites减少HTTP请求

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

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

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

  8. 【转】CSS Sprites教程大全(使用方法、工具介绍)

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

  9. css sprites介绍

    一.CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉 ...

  10. dataURI V.S. CSS Sprites 移动端

    英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...

随机推荐

  1. 转:【专题十一】实现一个基于FTP协议的程序——文件上传下载器

    引言: 在这个专题将为大家揭开下FTP这个协议的面纱,其实学习知识和生活中的例子都是很相通的,就拿这个专题来说,要了解FTP协议然后根据FTP协议实现一个文件下载器,就和和追MM是差不多的过程的,相信 ...

  2. myeclipse项目导入IDEA

    1.import project from external model     (不需要删除myeclipse多余文件) https://blog.csdn.net/d276031034/artic ...

  3. Linux文件管理和编辑常用命令

    Linux文件管理和编辑常用命令 mkdir 命令 功能说明 mkdir 命令用于创建一个目录,mkdir是make directory的缩写 格式: mkdir [选项] 目录名 mkdir 命令的 ...

  4. docker local registry server gave HTTP response to HTTPS client

    server gave HTTP response to HTTPS client报错是在insecure_registry中加入了http前缀,如果本地registry不是https的 就不要加任何 ...

  5. spark与kafka集成进行实时 nginx代理 这种sdk埋点 原生日志实时解析 处理

    日志格式202.108.16.254^A1546795482.600^A/cntv.gif?appId=3&areaId=8213&srcContId=2535575&area ...

  6. ubuntu 18.04下安装Java

    参照以下链接,这个是我找到的最易上手的学习教程了 https://blog.csdn.net/sangewuxie/article/details/80958611 按其步骤,我下载的是Java 11 ...

  7. java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'waterQuality

    如果一个项目中有两个@RequestMapping("/xxx")完全相同就会报  java.lang.IllegalStateException 改进办法:修改@RequestM ...

  8. rsync 同步文件如何指定属主属组和权限

    rsync daemon 同步数据时,若想同时指定权限和属主属组,可以做如下配置: [test1] uid = admin gid = admin incoming chmod = Dug=rwx,D ...

  9. spring boot 1.x完整学习指南(含各种常见问题servlet、web.xml、maven打包,spring mvc差别及解决方法)

    spring boot 入门 关于版本的选择,spring boot 2.0开始依赖于 Spring Framework 5.1.0,而spring 5.x和之前的版本差距比较大,而且应该来说还没有广 ...

  10. Github网站加载不完全,响应超时,解决办法

    Github网站加载缓慢信息不全解决方法 Github是一个代码托管平台和开发者社区,开发者可以在Github上创建自己的开源项目并与其他开发者协作编码.毫不夸张地说,高效利用Github是一个优秀的 ...