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 ...
随机推荐
- 【51】java设计模式-工厂设计模式剖析
工厂设计设计模式的分类: 工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple Factory):不利于产生系列产品: 2)工厂方法模式(Factory Method) ...
- 如何将windows格式的图标作为os x应用程序的图标
刚由windows转为os x的同学可能知道,在os x下我们想改变一个app的图标异常简单,直接打开该app的简介,然后将图标文件拖入简介窗口左上角图标方框即可.但是很多童鞋下载了一些图标文件后发现 ...
- Objective-C 是如何慢慢走红的?
对大多数人来说,Objective-C都是陌生的,原因在于它的走红过程太短.但透过Objective-C的火爆,我们就不难理解苹果程序商店的应用程序为什么轻易就突破了十万个. Objective-C的 ...
- masm的一些常用编译选项
ml命令行选项: /Dsymbol[=value] 定义给定名称的文本宏 /Fl 生成lst文件 /Sn lst文件中关闭符号表 /I 设置include文件的路径 /link 发送给link的连接器 ...
- Apache Kafka简介与安装(一)
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向 ...
- 查询linux机器的公网ip
在linux终端提示符下,输入以下命令: curl members.3322.org/dyndns/getip 可以看到下图已经查询到公网IP地址了,就是这么简单
- Testng基本问题
Testng testng.xml suite属性说明: suite verbose="4" 命令行信息打印等级 1~5 parallel 是否多线程并发运行测试:可选值(fals ...
- openssh升级的坑爹之路
安装Zlib http://zlib.net/zlib-1.2.8.tar.gz tar -zxvf zlib-1.2.8.tar.gz cd zlib-1.2.8 ./configure --sha ...
- Nginx接收的host值会影响alias的规则匹配
一般内网接收的HTTP请求都是内网唯一的网关传过来的,nginx的alias匹配会直接使用网关穿过的host值,而不是从URL解析出来的,从而导致的问题是,容器的alias相关Server_name规 ...
- 利用Tess4J实现图片识别
一.下载 1.进入官网下载页面 https://sourceforge.net/projects/tess4j/ 2.点击download 3.下载后解压,目录如下,圈出的三个文件夹是需要用到的 二. ...