CSS sprites

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的更多相关文章
- CSS Sprites优缺点
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- Css Sprites 多张图片整合在一张图片上
CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- 使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- 【转】CSS Sprites教程大全(使用方法、工具介绍)
什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
- css sprites介绍
一.CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉 ...
- dataURI V.S. CSS Sprites 移动端
英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...
随机推荐
- tomcat查看并修改jvm大小
JVM--Java Virtual Machine,Java虚拟机:tomcat不是直接运行在物理操作系统上,而是运行在Java虚拟机上,通常说的配置jvm就是配置分配给Java虚拟机的内存大小: 如 ...
- [转载]Oracle修改用户表所属表空间的步骤
1 .修改表的空间alter table TABLE_NAME move tablespace TABLESPACENAME 查询当前用户下的所有表选择'alter table'|| table_na ...
- [转载]SQL Server中的事务与锁
了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...
- .NET 常用ORM之iBatis
ibatis 一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目,到后面发展的版本叫MyBatis但都是指的同一个东西.最初侧重 ...
- linux下的route命令
语法: route [-CFvnee] route [add|del] [-net|-host] [网络或主机] netmask [gw|dev] route [-V] [--version] [ ...
- 【开源】EasyFlash 新年发布 V4.0 beta 版,完全重写(转)
[开源]EasyFlash 新年发布 V4.0 beta 版,完全重写 EasyFlash V4.0 beta [开源]嵌入式闪存库 EasyFlash for STM32,支持Env和IAP
- window.open()居中显示
function openwindow(url,name,iWidth,iHeight){ // url 转向网页的地址 // name 网页名称,可为空 // iWidth 弹出窗口的宽度 // i ...
- MyBatis的核心配置、动态sql、关联映射(快速总结)
MyBatis的核心对象和配置 #1. SqlSessionFactory对象: 单个数据库映射关系经过编译的内存镜像: 作用:创建SQLSession对象. //读取配置文件 InputSteam ...
- MySQL修改库名的方法
先创建新的库,再用RENAME TABLE 语句移动旧库中的表到新库,最后删除旧库. (root@localhost) [(none)] create database mydb_2; Query O ...
- SolrCloud集群配置
前提: 1,已经做好zookeeper集群或伪集群配置. 2,已将solr部署到tomcat中 接下来,我们将zookeeper与tomcat进行关联 vim tomcat/bin/catalina. ...