CSS精灵技术


在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>



 

 

posted on 2014-05-28 10:47  恋那片海  阅读(367)  评论(0编辑  收藏  举报