上班差不多有15天了，感觉每天都有写不完的也页面，每天都有不同的东西需要学习进步，很充实哦。今天接触到css精灵这个东西。其实之前有看过这种技术，但是没有操作过，只是听说这个技术很强大，能干嘛干嘛，但是对于没实际使用的我来说感觉 。。。。当今天真正接触到，才发现原来这么高大上。

css精灵是 什么 呢 ？

css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

它的原理：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图 片的位置。

优点：

  1.能减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点：

  1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

  2. CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

示例代码：

<!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精灵（css script 技术）的更多相关文章

  1. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  2. html+css第八篇滑动门和可爱的css精灵

    滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...

  3. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  4. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  5. CSS精灵技术

    在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...

  6. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  7. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  8. CSS 精灵技术（sprite）

    一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.  然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...

  9. CSS精灵技术（sprite）

    CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 .通过backgroun ...

随机推荐

  1. Java的函数与函数重载

    关于Java的函数与函数重载 关于Java的函数与函数重载 1. 函数 假设有一个游戏程序,程序在运行过程中,要不断地发射炮弹.发射炮弹的动作都需要使用一段百行左右的程序代码,在每次发射炮弹的地方都要 ...

  2. 《JavaScript+DOM编程艺术》的摘要（五）-----添加insertAfter

    在JS原生里面,没有提供insertAfter这个方法,不过我们可以利用appendChild.insertBefore.parentNode这些方法创建一个insertAfter方法,代码如下: f ...

  3. codeforces 546E. Soldier and Traveling 网络流

    题目链接 给出n个城市, 以及初始时每个城市的人数以及目标人数.初始时有些城市是相连的. 每个城市的人只可以待在自己的城市或走到与他相邻的城市, 相邻, 相当于只能走一条路. 如果目标状态不可达, 输 ...

  4. PADS LAYOUT到底怎么走线

    PADS LAYOUT走线,是不是转角要自己手动慢慢转角啊?不能像PROTEL中那样自动转角吗 自己手动转角老是转不好,出现许多线头,对不齐,是不是我操作有误啊 走线的过程中,可以试试这个,切换端点. ...

  5. 修改win7注册表发挥大容量内存优势

    现在请打开注册表编辑器,找到[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control \Session Manager\MomoryManagement ...

  6. js正则验证"汉字"

    var nickname = value; var regex = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1 ...

  7. Mac下搭建quick cocos2d-x编译环境

    一. 我知道在你的电脑中一定已经安装好了Xcode(没有自己下载去吧),打开Xcode,开启"偏好设置"对话框(commond + ,).假设打开之后出现的是这种一个对话框,那么直 ...

  8. http 代理 测试

    Technorati 标记: http 代理验证及测试 Technorati 标记: C# 参考了网上很多资料,综合整理出来最终的代码:   using System; using System.Co ...

  9. Js闭包与循环

    目标:点击任何一个li,提示当前点击位置 <ul> <li>第1个</li> <li>第2个</li> <li>第3个</ ...

  10. redis在spring中的配置及java代码实现

    1.建一个redis.properties属性文件 # Redis Setting redis.addr = 127.0.0.1 redis.port = 6379 redis.auth = mast ...