html5教程精灵,HTML5+CSS3基础之CSS Sprites(CSS精灵)
CSS Sprites介绍
Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思。在国内习惯成他为图片整合技术,说起来这个称呼也是满贴切的,因为他确实是多张图片整合为一整图片的技术,为什么要把多张图整合到一张上呢,这样做有什么好处呢?因为这样的话,当您访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites原理
Css sprites是将多张零散的背景图片整合到一张背景图上,然后通过background-position来调整背景的位置,这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的,不然很容易漏出其他的背景图片,所以尤其要控制好盒子的大小;其次,你还需要注意书写背景定位的时候极大多数都是负的,水平为负数,图片才会往左侧平移,所以才会显示出你需要的那部分背景图,垂直方向也是同理。当多个盒子引用一张背景图时,只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图,这样做的目的就是为了降低浏览器向服务器的请求次数,这样一来可以大大提高网页的加载速度。
CSS Sprites优缺点
CSS Sprites 的优点:
1、利用CSS Sprites能够减少浏览器向服务器的请求次数,减少http请求,从而提高页面的性能,这是图片精灵的最显著特点,也是被广泛应用的主要原因。
2、利用图片精灵还能减少图片的字节,你使用9张小的图片,一张4KB,9张就是36KB,而把他们都放一张图片上,只需要4KB到5KB就可,所以减少图片字节也是显而易见的。
3、在整理图片的过程中,不需要再纠结如此大量图片的名字问题,多张放在一张上,只需要取一个综合的名字就可以了,如此便提高了工作效率。
4、如果想改变网站风格,你只需要处理一张图片就可以了,把一张图片的颜色和风格一改,那么整个网站的风格就都变了,便于后期的维护和修改。
CSS Sprites 的缺点:
1、在应用精灵图片的时候,你需要考虑当前盒子会不会漏出其他的背景图,这个还好,比较头疼的是,页面自适应时,背景图的位置就没那么容易掌控了。
2、制作精灵图的过程比较繁琐,你需要处理好每张图之间的距离和位置,如果做得不合理,那么使用起来就比较麻烦了,甚至需要单独创建一个空的盒子来装背景图。
3、使用精灵图的页面后期维护带来了繁琐,因为他是多张图在一张图上,牵一发而动全身的感觉,你改变一张背景图,如果大小发生变化,那么其他的你就得动,只要你动了,那么所有的背景定位都将需要改变,所以一旦需要更改背景图的话,轻易不要改变其他图片的位置,原位能放下就在原位改,放不下就在下面添加。
CSS Sprites的使用
1、如果你的精灵图是整整齐齐的一竖排或者一横排,并且每一个背景图的尺寸都是一致的,那么你就幸运了,因为这样我们就不需要对每一个被那个图的位置都进行测量了,比如这张背景图:
他实现的页面效果就是和它等尺寸的一个小导航:
其中灰色为当前状态,橘色为鼠标以上的状态,这个精灵图就是个合理整齐的精灵图,代码书写起来也会方便很多,至少不需要每一个都进行测量,代码如下:
基本结构:
相关样式:
2、如果导航是横着的,那么精灵图最好都制作成竖向排列的,除非你的导航和背景相同尺寸,像如上案例,如果你没有做成竖向的,而做成了横向,那么你就需要一个单独的盒子来装背景图了,没办法使用padding-left来挤出背景的位置了,因为内容区也是支持背景的,请看这个背景图:
这张图不仅横向排列,而且周围多出很多空余的区域,这就会给前端带来很多的麻烦,这张图要实现的目标效果是:
看似很简单的页面,可是代码却比正常多出很多:
基本结构:
里面不得不使用一个span来装背景图;
相关样式:
单独对span进行定义样式。
3、精灵图也会经常和滑动门一起使用,这个时候你就需要注意了,同时编辑两个图片的位置关系,看下面页面效果:
使用的是下面两张精灵图:
这个时候你鼠标移上就需要改变两个背景定位了,尤其注意子盒子的水平位置,代码如下:
基本结构:
相关样式:
鼠标移上要同时改变两个标签的背景图片。
总结:在精灵图的使用过程中,精灵图做的标不标准就决定于页面书写的难易程度,所以说一个整齐规范的精灵图使用起来也是很舒服的。
这里再给大家陈列几张常见的精灵图:
这张精灵图实现的页面效果是:
这也是个不错的精灵图,使用起来方便快捷。
第二组是名鞋库里面的精灵图:
第一张使用起来就要比第二张方便的多。
还有这些:
这些都是精灵图,就是用来书写鼠标以上的酷炫效果的,精灵图不见得非得弄很多很多的图,太多了反而会增加负担,增加书写页面的负担,增加页面加载的负担。
举报/反馈
html5教程精灵,HTML5+CSS3基础之CSS Sprites(CSS精灵)相关推荐
- android 精灵图的使用方法,css sprites(精灵图)如何使用?
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
- css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
- [css] 你是怎么设计css sprites(精灵图)的?有哪些技巧?
[css] 你是怎么设计css sprites(精灵图)的?有哪些技巧? 首先肯定不会去用PS量,那太费时间了~ 没有webpack以前,用Gulp的gulp.spritesmith插件,这里附上配置 ...
- css sprites原理,CSS Sprites (CSS图像拼合技术)教程工具
一篇教程,其源文件可下载学习 Fast Rollovers Without Preload 一个快速翻转效果的例子 CSS Sprites + Rounded corners 另一个例子:使用CSS ...
- html5网页设计教程电子书,HTML5教程(使用HTML5设计网络富客户端应用)
该作品是PDF文件格式请下载 福昕PDF阅读器 新的强大的多媒体和交互功能的HTML5,<HTML5: Designing Rich Internet Applications >包括风格 ...
- CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图 图片合成技术 CSS Spri ...
- html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
- css sprites——CSS精灵
简介 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅 ...
- html中精灵图的使用方法,css sprites(精灵图)如何使用?
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
- css sprites css精灵
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的"background-image","background-repeat&q ...
最新文章
- EIGRP的等价负载均衡
- 为什么基类的析构函数要声明成虚函数
- nodejs基础学习-文件读取
- 机器学习知识点(二十一)特征选择之岭回归和LASSO
- Andriod: 在xml布局中使用自定义属性
- 玩机器学习,能不知道它?
- 学成在线--12.Spring整合RibbitMQ
- 建立一颗二叉排序树,并删除该二叉排序树上的某个节点
- mariadb mysql同步_MySQL(Mariadb)主从同步基础
- 20 年“码龄”的老程序员如何看编程发展?
- 黑客第二课:脱屌第一步 —— Vim Fundamentals
- android游戏源码 2048,Android实现2048小游戏
- Python基础知识从hello world 开始(第三天)
- JavaScript参考文档
- 目标检测 YOLO 系列:快速迭代 YOLO v5
- 网上申请办理杭州市民卡
- oracle对时间范围比较的语句
- mac制作icns图标
- 基于python的明日方舟自动刷取理智的脚本(一)—— 初始化环境
- CSS隐藏浏览器滚动条
热门文章
- 推荐系统user-based和item-based协同过滤算法定性比较
- 解决:windows电脑永不自动关机
- html5刮奖效果,HTML5 Canvas实战之刮奖效果
- Visual C++实现俄罗斯方块游戏实战三:核心算法设计与实现(附源码和资源)
- 得一微ys9082hc、ys9082hp怎么量产,ys9082hc量产工具,ys9082hp开卡软件,ys9082hc使用量产工具对固态硬盘进行ys9082hp开卡的指导教程
- 《热血传奇2》wix、wil文件解析Java实现
- 【C++】初窥C++
- Android 进阶笔记。
- Oracle修改序列(sequence)当前值的两种方法
- 模式识别学习笔记(11)——线性判别函数