在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. 对ubuntu初学感想

    感觉对ubuntu一头雾水...作为什么都不懂得小菜鸟,感觉以后还有很多要学习的.fighting

  2. js Function 函数

    函数 var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; 函数体内部的语句在执行时,一旦执行到re ...

  3. win下php的memcached的安装与使用

    1.memcache的php扩展与memcached服务器的区别? php要操作memcached就必须要安装memcache的扩展, 在http://windows.php.net/download ...

  4. Spring框架的配置文件分开管理（了解）

    1. 例如:在src的目录下又多创建了一个配置文件,现在是两个核心的配置文件,那么加载这两个配置文件的方式有两种! * 主配置文件中包含其他的配置文件: <import resource=&qu ...

  5. [转]Win7下PEiD已停止工作

    转载自:http://www.programlife.net/peid-stop-working-under-win7.html PEID是一个很不错的工具,可查壳,查壳PE信息,借助插件还可以做一些 ...

  6. 自动化部署nginx负载均衡及监控短信报警

    题: 开发脚本自动部署及监控 1.编写脚本自动部署反向代理.web.nfs: 要求: I.部署nginx反向代理三个web服务,调度算法使用加权轮询: II.所有web服务使用共享存储nfs,保证所有 ...

  7. npm 如何设置镜像站为淘宝网

    转载 2015年06月24日 17:12:12 10542 淘宝镜像:http://npm.taobao.org/ 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候 ...

  8. dateframe取数据

    import numpy as npimport pandas as pd## x1=[1,2,3,4]# x2=[4,5,6,7]# x3=[7,8,9,10]# df=pd.DataFrame(# ...

  9. 优秀UX设计师的八条黄金法则

    与用户保持亲密   成为成功的UX设计师最重要的先决条件之一就是与用户保持紧密的联系,以发现和了解他们的需求和爱好.理想情况下你应该让自己完全地成为产品用户,因为只有这样你才能理解背后的动机.“这样的 ...

  10. part1:5Linux命令详解

    1.Linux命令介绍 Linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.磁盘驱动器.键盘.鼠标还是用户等都是文件.Linux系统管理的命令是它正常运行的 ...