一、精灵图使用场景：

二、Css Sprite（优点）

  1. 减少图片的字节。
  2. 减少网页的http请求，从而大大的提高页面的性能。
  3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
  4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

三、实现原理

css background-position

控制一个层可显示的区域范围大小，
通过一个窗口进行背景图的滑动
实例：

代码如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>background-position<</title>

        <link rel="stylesheet" href="index.css"/>

    </head>

    <body>

        <span class="oo span1"></span>

        <span class="oo span2"></span>

        <span class="oo span3"></span>

        <span class="pp span4"></span>

        <span class="ll span5"></span>

        <span class="hh span6"></span> 

    </body>

</html>

.body{

    margin:0 auto;

    text-align:center;

}

.oo{

    display:block;

    width:43px;

    height:44px;

    background:url(images/img_navsprites_hover.gif) no-repeat;

    margin:20px auto;

}

.span1{

    background-position:0 0;

    position:absolute;

    top:0px;

}

.span2{

    background-position:-47px 0;

    position:absolute;

    top:0px;

    left:60px;

}

.span3{

    background-position:-94px 0;

    position:absolute;

    top:0px;

    left:120px;

}

.span1:hover{

    background-position:0 -45px;

}

.span2:hover{

    background-position:-47px -45px;

}

.span3:hover{

    background-position:-94px -45px;

}

.pp{

    display:block;

    width:38px;

    height:38px;

    background:url(images/pwd-icons-new.png) no-repeat;

    margin:20px auto;

}

.span4{

    background-position:-48px -96px;

}

.ll{

    display:block;

    width:24px;

    height:26px;

    background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;

    margin:20px auto;

}

.span5{

    background-position:0 -483px;

}

.hh{

    display:block;

    width:18px;

    height:18px;

    background:url(images/toolbars.png) no-repeat;

    margin:20px auto;

}

.span6{

    background-position:-95px -211px;

}

**background-position:npx npx;
（第一个值是调左右的，当你需要将背景图向右调的时候用正值， 向左则为负值 同理将背景图上下调动的时候上是用负值，下是正值）**
<2>效果图如下：
（这是原图）

（这是选完以后的图）

第一幅图是原图与暗图的转换；选了第二幅图的锁；第四幅图的火车；第五幅图的小人。

刚入前端写的不好见谅！！！(^o^)/~

Css Sprite(雪碧图、精灵图)<图像拼合技术>的更多相关文章

  1. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  2. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  3. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  4. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  5. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  6. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  7. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  8. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  9. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

随机推荐

  1. redis 在linux安装

    转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...

  2. 微软智能云Azure – 中国首家官方支持CoreOS的公有云

    北京2016年6月24日, 在由中国开源软件推进联盟(COPU)主办, 开源社协办,微软赞助的“第十一届开源中国开源世界高峰论坛”上,微软亚太研发集团云计算高级总监梁戈碧女士正式对外宣布一个令人振奋的 ...

  3. Linux：配置HTTPS，获取ssl证书

    这里小仓鼠将Https配置流程记录下来 1.访问网站:https://www.aliyun.com/ss/?k=ssl 2.选择‘立即购买’ 3. 页面变换为: 4.点击‘立即购买’ 5.进行支付 6 ...

  4. 绕过安全狗等一些WAF收集

    绕过安全狗sql注入 http://demo.74cms.com/plus/ajax_common.php?act=hotwordquery=錦union+select+1,group_concat% ...

  5. mongoDB 固定集合(capped collection)

    固定集合(Capped Collection)是一种尺寸固定的“循环”集合,可提供高效的创建.读取.删除等操作.这里所指的“循环”的意思是,当分配给集合的文件尺寸耗尽时,就会自动开始删除最初的文档,不 ...

  6. swift的clourse：字面量化的函数、将函数字面量化-与函数的类型签名相同

    1.clourse的签名与函数的签名相同: 所以两者可以相互赋值: 2.可以将函数(表达式)字面量化: 因为可以字面量化,所以和其它的值(变量)没有任何区别,可以存在变量存在的任何地方: 3.clou ...

  7. 三.Shell脚本提取文件名称和所在的目录

    一·简介 提取文件名称或者目录,一般都会使用到#,##,%和%%,但是他们的区别很容易记混淆了.在一下4种方式中,目标匹配字符是不在结果中. #:表示从左开始算起,并且截取第一个匹配的字符 ##:表示 ...

  8. 【[TJOI2014]上升子序列】

    这本质上是一个\(dp\) 如果没有"两个上升子序列相同,那么只需要计算一次"这一个性质,那么就很好做了,我们用\(dp[i]\)表示以\(i\)结尾的上升子序列个数,那么就有\( ...

  9. Codeforces Round #533 (Div. 2) B. Zuhair and Strings 【模拟】

    传送门:http://codeforces.com/contest/1105/problem/B B. Zuhair and Strings time limit per test 1 second ...

  10. 访问服务器，远程访问linux主机

    ssh conch@+ip地址,输入密码后就可以访问并使用服务器了.登录服务器之后,xbwang@xbwang-desktop:~$变成了conch@conchdev:~$ ,这样你就可以像使用普通电 ...