css sprites——CSS精灵
2015-08-31 22:45
696 查看
简介
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。
举例
我们仅仅只需要***一个扑克牌,拿黑桃10为例子。这也是css sprites的一个中心思想,就是把多个图片融进一个图里面。
这就是融合后的图,相信对PS熟悉的同学应该很容易的理解,通过PS我们就可以组合多个图为一个图。
现在我们书写html的结构:
在这里我们来分析强调几点:
card为这个黑桃十的盒子或者说快,对div了解的同学应该很清楚这点。
我用span,b,em三种标签分别代表三种不同类型的图片,span用来表标中间的图片,b用来表示数定,em用来表示数字下面的小图标。
class里面的声明有2种,一个用来定位黑桃10中间的图片的位置,一个用来定义方向(朝上,朝下)。
上面是DIV基本概念,这还不是重点,不过对DIV不太清楚的同学可以了解。
下面我们重点谈下定义CSS:
这个是对span容器的CSS定义,其他属性就不说了,主要谈下如何从这个里面来理解css sprites。
背景图片,大家看地址就是最开始我们融合的一张大图,那么如何将这个大图中的指定位置显示出来呢?因为我们知道我们做的是黑桃10,这个大图其他的图像我们是不需要的,这就用到了css中的overflow:hidden;但大家就奇怪了span的CSS定义里面没有overflow:hidden啊,别急,我们已经在定义card的CSS里面设置了(这是CSS里面的继承关系):
理解到这点还不够,还要知道width:125px;height:170px; 这个可以理解成是对这个背景图片的准确切割,当然其实并不是切割,而是把多余其他的部分给隐藏了,这就是overflow:hidden的妙用。
通过以上的部分的讲解,你一定可以充分的把握css sprites的运用,通过这个所谓的“切割”,然后再通过CSS的定位技术将这些图准确的分散到这个card里面去!
PS:
CSS的定位技术,大家可以参考其他资料,例如相对定位和绝对定位,这里我们只能尝试用绝对定位。
补充:
为什么要采取<span class="A1 up1"></span>这样的结构?
span这个容器是主要作用就是存放这张大的背景图片,并在里面实现”切割“,span里面切割后的背景是所有内容块里面通用的!
后面class为什么要声明2个属性?
很显然,一个是用来定位内容块的位置,一个是用来定义内容块中的图像的朝上和朝下,方位的!
优点
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通***方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
附上黑桃10的完整源码:
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。
举例
我们仅仅只需要***一个扑克牌,拿黑桃10为例子。这也是css sprites的一个中心思想,就是把多个图片融进一个图里面。
这就是融合后的图,相信对PS熟悉的同学应该很容易的理解,通过PS我们就可以组合多个图为一个图。
现在我们书写html的结构:
<div class="card"> <div class="front"> <b class="N1 n10"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A2 up1"></span> <span class="A3 down1"></span> <span class="A4 down1"></span> <span class="B1 up1"></span> <span class="B2 down1"></span> <span class="C1 up1"></span> <span class="C2 up1"></span> <span class="C3 down1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n10_h"></b> </div> </div>
在这里我们来分析强调几点:
card为这个黑桃十的盒子或者说快,对div了解的同学应该很清楚这点。
我用span,b,em三种标签分别代表三种不同类型的图片,span用来表标中间的图片,b用来表示数定,em用来表示数字下面的小图标。
class里面的声明有2种,一个用来定位黑桃10中间的图片的位置,一个用来定义方向(朝上,朝下)。
上面是DIV基本概念,这还不是重点,不过对DIV不太清楚的同学可以了解。
下面我们重点谈下定义CSS:
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
这个是对span容器的CSS定义,其他属性就不说了,主要谈下如何从这个里面来理解css sprites。
背景图片,大家看地址就是最开始我们融合的一张大图,那么如何将这个大图中的指定位置显示出来呢?因为我们知道我们做的是黑桃10,这个大图其他的图像我们是不需要的,这就用到了css中的overflow:hidden;但大家就奇怪了span的CSS定义里面没有overflow:hidden啊,别急,我们已经在定义card的CSS里面设置了(这是CSS里面的继承关系):
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
理解到这点还不够,还要知道width:125px;height:170px; 这个可以理解成是对这个背景图片的准确切割,当然其实并不是切割,而是把多余其他的部分给隐藏了,这就是overflow:hidden的妙用。
通过以上的部分的讲解,你一定可以充分的把握css sprites的运用,通过这个所谓的“切割”,然后再通过CSS的定位技术将这些图准确的分散到这个card里面去!
PS:
CSS的定位技术,大家可以参考其他资料,例如相对定位和绝对定位,这里我们只能尝试用绝对定位。
补充:
为什么要采取<span class="A1 up1"></span>这样的结构?
span这个容器是主要作用就是存放这张大的背景图片,并在里面实现”切割“,span里面切割后的背景是所有内容块里面通用的!
后面class为什么要声明2个属性?
很显然,一个是用来定位内容块的位置,一个是用来定义内容块中的图像的朝上和朝下,方位的!
优点
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通***方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
附上黑桃10的完整源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>***一幅扑克牌--黑桃10</title> <style type="text/css"> <!-- .card { width: 125px; height: 170px; position: absolute; overflow: hidden; border: 1px #c0c0c0 solid; } /*中间图片通用设置*/ span { display: block; width: 20px; height: 21px; position: absolute; background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; } /*小图片通用设置*/ b { display: block; width: 15px; height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow: hidden; } /*数字通用设置*/ em { display: block; width: 15px; height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow: hidden; } /*各坐标点位置*/ .N1 { left: 1px; top: 8px; } .First { left: 5px; top: 20px; } .A1 { left: 20px; top: 20px; } .A2 { left: 20px; top: 57px; } .A3 { left: 20px; top: 94px; } .A4 { left: 20px; top: 131px; } .B1 { left: 54px; top: 38px; } .B2 { left: 54px; top: 117px; } .C1 { left: 86px; top: 20px; } .C2 { left: 86px; top: 57px; } .C3 { left: 86px; top: 94px; } .C4 { left: 86px; top: 131px; } .Last { bottom: 20px; right: 0px; } .N2 { bottom: 8px; right: 5px; } /*大图标黑红梅方四种图片-上方向*/ .up1 { background-position: 0 1px; } /*黑桃*/ /*大图标黑红梅方四种图片-下方向*/ .down1 { background-position: 0 -19px; } /*黑桃*/ /*小图标黑红梅方四种图片-上方向*/ .small_up1 { background-position: 0 -40px; } /*黑桃*/ /*小图标黑红梅方四种图片-下方向*/ .small_down1 { background-position: 0 -51px; } /*黑桃*/ /*A~k数字图片-左上角*/ .n10 { background-position: -191px 0px; left: -4px; width: 21px; } /*A~k数字图片-右下角*/ .n10_h { background-position: -191px -22px; right: 3px; width: 21px; } /*A~k数字图片-左上角红色字*/ .n10_red { background-position: -191px 0px; } /*A~k数字图片-右下角红色字*/ .n10_h_red { background-position: -191px -33px; } --> </style> </head> <body> <!--10字符--> <div class="card"> <div class="front"> <b class="N1 n10"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A2 up1"></span> <span class="A3 down1"></span> <span class="A4 down1"></span> <span class="B1 up1"></span> <span class="B2 down1"></span> <span class="C1 up1"></span> <span class="C2 up1"></span> <span class="C3 down1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n10_h"></b> </div> </div> </body> </html>
相关文章推荐
- css 中的background:transparent到底是什么意思有什么作用
- CSS动画-页面特效
- LIU_XF (原创)QT Creator的style sheet的几种用法(QT Creator)(StyleSheet)(样式)(QT4.7)(用法)
- 【写一个自己的js库】 5.添加修改样式的方法
- CSS基础(一)
- 【转载】纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
- css控制文本最后用省略号代替
- CSS中font-size、font-family、line-height顺序以及简写属性
- HTML+CSS大风车及十字架的实现
- 详解CSS中的Box Model盒属性的使用
- css ie6,ie7,ie8 兼容性写法,CSS hack写法
- 经常使用的两个清爽的table样式
- 百度地图 v3.5搜索功能,和地图缩放按钮更改样式
- css3中创建动画的三种方式详解
- 你应该知道的CSS文字大小单位PX、EM、PT
- 如何使CSS--better(系列二)
- 如何使CSS--better(系列一)
- FontAwesome图标制作(css)
- 设置浏览器默认样式
- [CSS] Transforms