Css Sprite(雪碧图、精灵图)<图像拼合技术>
一、精灵图使用场景：
二、Css Sprite（优点）
- 减少图片的字节。
- 减少网页的http请求，从而大大的提高页面的性能。
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
三、实现原理
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(雪碧图、精灵图)<图像拼合技术>的更多相关文章
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...
- CSS 图像拼合技术
CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...
随机推荐
- tomcat启动很慢 停留在 At least one JAR was scanned for TLDs yet contained no TLDs.
部署项目时候,发现启动特别慢,要等好几分钟,这不正常啊.然后每次部署都停留在 At least one JAR was scanned for TLDs yet contained no TLDs. ...
- C#清空回收站
曾经用过bat处理回收站,但是效果很不理想(应该是我水平不够吧),后来发现C#可以直接调用系统dll,非常简单.下面是具体函数: class ClearRecycle { [DllImport(&qu ...
- HTML 水平线hr
HTML 水平线 <hr /> 标签在 HTML 页面中创建水平线. hr 元素可用于分隔内容. 实例 <p>This is a paragraph</p> < ...
- Linux ->> Chmod命令改变文件/文件夹属性
简介 chmod命令用于改变linux系统文件或目录的访问权限,控制用户/用户组对文件或目录的访问权限. 用法: 两种用法:1)用字母r(读).w(写).x(执行)表示权限类型:2)用数字表示,4代表 ...
- python 利用栈实现复杂计算器
#第五周的作业--多功能计算器#1.实现加减乘除及括号的优先级的解析,不能使用eval功能,print(eval(equation))#2.解析复杂的计算,与真实的计算器结果一致#用户输入 1 - 2 ...
- 【Asp.Net MVC】asp.net mvc Model验证总结及常用正则表达式
转自:http://www.cnblogs.com/easy5weikai/p/3843131.html 关于Model验证官方资料: http://msdn.microsoft.com/zh-cn/ ...
- 一些通过SAP ABAP代码审查得出的ABAP编程最佳实践
1. 这两个IF ELSE分支里检测的条件其实逻辑上来说都是同一类,应该合并到一个IF分支里进行检查: It is an expensive operation to open a file in a ...
- 邮件营销巧妙添加GIF让您的邮件动起来
动态图片远比静态图片要吸引人,因此近年来,一些营销人员也开始越来越频繁的使用GIF动画图片,适当的穿插和点缀动态图片,能够生动形象的表达出 主题,并且时不时令读者忍俊不禁.尤其是做邮件营销的,如果能在 ...
- hdu-2879 hehe---积性函数
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2879 题目大意: he[n]为小于n且满足x^2 = x (mod n)的个数 hehe[n] = ...
- 更新UI的几种方式
在学习Handler的过程中牵涉到UI的更新,在这里就总结一下更新UI的四种方式吧,用法都比较简单,直接看代码就可以了. 一.使用Handler的post方法 新建项目,修改MainActivity代 ...