在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术。通过查看源发现,其实他是通过超级链接的伪类实现的,当鼠标放上去的时候改变背景颜色,这种实现能够通过一个类来控制所有的超级链接标签。文章中是通过图片来设置的。

思路一:准备两张大小相同,内容不同的图片,正常情况显示一张,鼠标经过的时候显示另外一张
a:link
是伪类,是超级链接,默认情况
a:hover
做鼠标放上去的时候

思路二:将两张图片合成一张图片,设置成图片的背景,然后将a:hover向上移动像素即可,background-position:0 -41;//图片的高度为82

HTML代码如下:

<span style="font-size:18px;">	 <body>
<a id="one" href="#"></a>
<a id="two" href="#"></a>
</body>
</span>

CSS代码如下:

<span style="font-size:18px;">  <style type="text/css">
body{
margin:0;
padding:0;
}
body{
padding-left:100px;
padding-top:100px;
}
/*********** 思路一 *************/
#one{
/* 图片的大小为82*44 */
width:82px;
height:44px;
display:block;
background-color:#ccc;
background-image:url(image/link.jpg);
}
/* 当鼠标经过的时候,改变图片源 */
#one:hover{
background-image:url(image/hover.jpg);
}
/********* 思路二 ********/
#two{
/* 图片的大小为82*82 */
height:41px;
width:82px;
display:block;
margin-top:100px;
background-image:url(image/bottom.jpg);
}
/* 当鼠标经过的时候设置显示的位置 */
#two:hover{
background-position:0 -41px;/* 默认是从左上角开始显示的 */
}
</style></span>

CSS精灵技术的更多相关文章

  1. CSS 精灵技术(sprite)

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

  2. CSS——精灵技术

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

  3. CSS Sprites (CSS 精灵) 技术

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

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

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

  5. CSS精灵技术(sprite)

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

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

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

  7. css:background-position > 精灵技术

    background-position : length || length background-position : position || position 取值: length  : 百分数 ...

  8. CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  9. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

随机推荐

  1. Space Ant(极角排序)

    Space Ant http://poj.org/problem?id=1696 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions ...

  2. Maven项目标准目录结构

    -----------------------siwuxie095 Maven 项目标准目录结构 1.Maven 项目分为两种 (1)Java 项目 (2)Web 项目 2.对于 Java 项目 其中 ...

  3. 使用ecstore-sdk开发包制作易开店和启明星模板

    前言: 尽管商派官网有模板开发教程,但是诸多方面太过笼统.我等平庸之辈,纵使细心研读,潜心修炼,亦未能品味练功境界,领悟其中真谛. 商派有云,此九阳真经不用您挥刀****本人却感觉此教程令人抓狂,无人 ...

  4. 数字三角形 · Triangle

    从上到下用DP. [抄题]: 给定一个数字三角形,找到从顶部到底部的最小路径和.每一步可以移动到下面一行的相邻数字上. 比如,给出下列数字三角形: [ [2], [3,4], [6,5,7], [4, ...

  5. fragment Activity之间传值的方法 之------------接口回调

    首先  定义一个  回调接口 public interface FragmentCallBack { public void callbackFun1(Bundle arg); public void ...

  6. fragment 事务回滚 ---动态创建fragment

    import java.util.Date; import java.util.LinkedList; import com.qianfeng.gp08_day23_fragment5.fragmen ...

  7. xp安装vmware10时一直停在installing packages on the system

    我估计的原因是: vm会在网上邻居(LAN或高速internet)下创建两个 vmware network adapter vmnet8 vmware network adapter vmnet1   ...

  8. Loadrunner12.5-同一个网址通过vugen不能打开,但是直接在ie11中就可以打开

    一:录制选项修改成“WinINet级别数据”,重新录制就可以成功打开网页了. 注:运行时设置--首选项--高级--“使用WinINet回放而非套接字(仅限Windows)”需要勾选上:否则录制脚本结束 ...

  9. Java中通过SimpleDateFormat格式化当前时间:/** 输出格式:20060101010101001**/

    import java.util.*; import java.text.SimpleDateFormat; int y,m,d,h,mi,s,ms; String cur; Calendar cal ...

  10. 8.15jsp document 头部声明 区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...