雪碧图

最新推荐文章于 2020-04-27 10:40:36 发布

镇长1998

最新推荐文章于 2020-04-27 10:40:36 发布

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/weixin_41514525/article/details/90217631

web前端专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何使用CSS的background-position属性结合hover效果来实现雪碧图，通过一个具体示例展示了雪碧图的制作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>雪碧图</title>
		
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}	
			
			.spirit{
				width: 150px;
				height: 200px;
				background:url(img/spirit.jpg);
				background-repeat: no-repeat;
			}
			
			.spirit:hover{
				background-position: -120px;
			}
		</style>
	</head>
	<body>
		
		<div class="spirit">     
			                 <!--因为div里面只是设置背景图片并没有子元素将它撑起来，所以需要手动设置宽高，要不然高度坍塌，看不到背景了-->   
		</div>
			
	</body>
</html>

雪碧图主要就是用： background—position 和 hover 和 background  三者共同实现的