CSS精灵技术

最新推荐文章于 2022-09-28 17:28:15 发布

niannapianhai

最新推荐文章于 2022-09-28 17:28:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：黑马程序员——HTML

本文链接：https://blog.csdn.net/niannapianhai/article/details/27316127

黑马程序员——HTML 专栏收录该内容

2 篇文章

订阅专栏

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