css sprite 介绍和实例
先看看百度百科是如何介绍的
关于CSS Sprite
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。 加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。 客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
CSS Sprites原理
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites优点
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
CSS Sprites缺点
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂; CSSSprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK! CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。 CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。
贴个小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#tools h5 {margin: 0 0 10px 0;padding: 0;overflow:hidden;}div#tools h5#tools_reference, div#tools h5#tools_quiz {text-indent: -9999px;width: 120px;height: 45px;}div#tools h5#tools_reference a, div#tools h5#tools_quiz a {display: block;margin: 0;padding: 0;width: 100%;height: 100%;text-decoration: none;}div#tools h5#tools_reference a {background: transparent url(http://www.nowamagic.net/csszone/images/site_reference.gif) top left no-repeat;}div#tools h5#tools_reference a:hover {background: transparent url(http://www.nowamagic.net/csszone/images/site_reference.gif) 0 -45px no-repeat;}div#tools h5#tools_quiz a {background: transparent url(http://www.nowamagic.net/csszone/images/site_quiz.gif) top left no-repeat;}div#tools h5#tools_quiz a:hover {background: transparent url(http://www.nowamagic.net/csszone/images/site_quiz.gif) 0 -45px no-repeat;}
</style>
</HEAD><BODY><div id="tools"> <h5 id="tools_reference"><a href="">PHP 参考手册</a></h5> <h5 id="tools_quiz"><a href="">PHP 测验</a></h5>
</div></BODY>
</HTML>
以上在IE6中支持不是很好。
GWT, Ext中就有频繁使用这个。
css sprite 介绍和实例相关推荐
- css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享 发布时间:2009-10-15 12:48:01 作者:佚名 我要评论 可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- css sprite原理优缺点及使用
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
- CSS Sprite的应用
什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并 ...
- CSS Sprite的应用【转】
什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并 ...
- 雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
- html 图片拼接,css sprite图像拼接技术
css图像拼接技术英文成为css sprite是一种比较流行的网页图片处理方式,即将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片, ...
- 如何在基于vue-cli的项目中,使用精灵图 css sprite
新钛云服已为您服务1236天 CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图. 就是将多张比较小的图片有规则的合并成一张背景图,然后再 ...
- 关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课 ...
最新文章
- 互联网协议 — IPv4 — 分片与重组
- [CTO札记]从生活来看‘服务心态’
- 新闻发布系统java ee_Java EE 7发布–反馈和新闻报道
- 【JAVA基础篇】集合框架
- android 右上角 xml,android状态栏右上角增加图标的方法
- 黑龙江工程学院计算机系有几个门,黑龙江工程学院本科专业设置一览表
- JHChart 1.1.0 iOS图表工具库中文ReadMe
- mfc实现播放器功能,双击全屏,再双击还原
- 再品Resnet残差网络
- jdk和jre和jvm区别_JDK,JRE和JVM之间的区别
- PDFCreator pdf制作软件+教程
- 进程间通讯的7种方式
- winrar是不是计算机应用软件,请注意winrar不是一个免费软件。在40天的试用期结束后,你必须购买一个许可,或者将他从你的计算机中删除...
- MySQL查询函数---为表和字段取别名
- [RK356x] [Firefly-Linux] 10min带你获取、了解与编译Kernel源代码
- Vscode Remote SSH 远程连接失败过程报错:试图写入的管道不存在
- 计算机键盘打字基础知识,计算机基础知识:计算机键盘的使用
- python爬app西瓜视频_Python爬虫下载西瓜视频
- 数据结构与算法实验 实验6:二叉树ADT的二叉链式实现 (由完全前序序列创建二叉树 / 求二叉树的节点数/树高/叶子节点数 /先序中序后序层序遍历)
- netdev_features_t和ip_summed说明
热门文章
- Hadoop 回收站
- php重定向http请求
- 吴立德机器学习笔记(转)
- ERP通用附件管理功能设计与实现
- SQL中exists和in的区别
- MySQL Root密码丢失解决方法总结
- Non-parseable POM C:\Users\admin\.m2\repository\org\springframework问题解决方案
- 【报告分享】2021年中国数字经济就业发展研究报告.pdf(附下载链接)
- 2020年6月“省时查报告”十大热门报告盘点(附下载链接)
- 【实践】图推荐算法在EE问题上的应用(附交流视频和PPT下载链接)