CSS Sprites的优缺点
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的优缺点的更多相关文章
- CSS Sprites优缺点
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...
- CSS Sprites(CSS精灵) 的优缺点
CSS Sprites 的优点: 1.减少图片的字节 2.减少了网页的http请求,从而大大的提高了页面的性能 3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命 ...
- CSS Sprites的概念、原理、适用范围和优缺点
CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
- 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,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- 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 ...
随机推荐
- android https安全连接
如果不需要验证服务器端证书,直接照这里做 [java] view plaincopy public class Demo extends Activity { /** Called when the ...
- unix设计哲学
说到Unix为我们所带来的软件开发的哲学,我必需要说一说.Unix遵循的原则是KISS(Keep it simple, stupid).在http://en.wikipedia.org/wiki/Un ...
- 回顾一下shell脚本1
首先: 1.编写一个hello.sh的程序 hello.sh vim hello.sh #!/bin/sh #作者:yangyx echo "hello shell"</sp ...
- asp.net core中写入自定义中间件
首先要明确什么是中间件?微软官方解释:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?tabs=aspnet ...
- Next Permutation 下一个排列
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- valid palindrome(回文)
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- htmlDOM操作1
DOM 是 Document Object Model(文档对象模型)的缩写. HTML 的标准对象模型 HTML 的标准编程接口 HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它 ...
- Android两级嵌套ListView滑动问题的解决
Android下面两级嵌套ListView会出现滑动失效,解决方案,把两级Listview全换成NoScrollListView,代码如下: public class NoScrollListView ...
- 看Instgram课程分享笔记
第一课:相信直觉.乐于尝试.专注于事而不是陷于创业社交之类的外围活动 第二课:用工程实践解决问题,结交技术朋友 第三课:最难的是找到要解决的问题,用简单方法解决简单问题 第四课:早失败,常失败,由失败 ...
- Java虚拟机-垃圾收集器
垃圾收集器(Garbage Collection, GC)的诞生引导出了三个问题: 哪些内存需要回收? 什么时候回收? 如何回收? 对于线程独占的三个区域(程序计数器.虚拟机栈.本地方法栈)不用过多的 ...