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 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...
随机推荐
- 提问的智慧 How To Ask Questions The Smart Way
提问的智慧 How To Ask Questions The Smart Way Copyright © 2001,2006,2014 Eric S. Raymond, Rick Moen 本指南英文 ...
- SQL点点滴滴_唯一索引设计指南-转载
唯一索引能够保证索引键中不包含重复的值, 从而使表中的每一行从某种方式上具有唯一性, 只有当唯一性是数据本身的特征时, 指定唯一索引才有意义. 例如, 如果您希望确保 HumanResources.E ...
- 【Leetcode】【Medium】Populating Next Right Pointers in Each Node
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- Thrift学习笔记—IDL基本类型
thrift 采用IDL(Interface Definition Language)来定义通用的服务接口,并通过生成不同的语言代理实现来达到跨语言.平台的功能.在thrift的IDL中可以定义以下一 ...
- RunDll32.exe 详解及[Windows批处理]清除IE缓存
Rundll32命令详解 文件作用:执行32位DLL文件中的内部函数 位置:X:(当前系统分区)\windows\system32 命令语法: Rundll32.exe DLLname,Functio ...
- selenium+python 数据驱动-csv篇，可封装
#循环读取csv文件中的数据,可以作为用户名,密码等使用from selenium import webdriverimport csv#获取csv文件中password列with open(r'C: ...
- maven构建报错org.apache.maven.lifecycle.LifecycleExecutionException
2017年06月04日 15:03:10 阅读数:7991 maven构建报错 org.apache.maven.lifecycle.LifecycleExecutionException: Fail ...
- jmeter中类型转换，字符串，转数字型或浮点型
最近在做接口,使用的是jemter工具,在使用jemter工具中,基础的和高级的,在贺满的博客中可以查看到,https://www.cnblogs.com/puresoul/p/5092628.htm ...
- MATLAB入门学习（六）
今天学三维作图 (*^__^*)…… 三维曲线作图 用到的命令:plot3 基本格式:plot3(x,y,z,s) 这里要画曲线,你需要知道该曲线的参数方程x=x(t),y=y(t),z=z(t) 然 ...
- JAVA中高访问量高并发的问题怎么解决?
尽量使用缓存,包括用户缓存,信息缓存等,多花点内存来做缓存,可以大量减少与数据库的交互,提高性能. 用jprofiler等工具找出性能瓶颈,减少额外的开销. 优化数据库查询语句,减少直接使用hiber ...