精灵图的定位

大坤...

已于 2022-07-15 16:45:34 修改

阅读量566

点赞数

文章标签：大数据

于 2022-07-15 16:43:14 首次发布

本文链接：https://blog.csdn.net/red_HTML/article/details/125807795

版权

本文介绍了如何通过CSS精灵图优化图片请求，并展示了如何利用hover效果实现li标签背景的动态切换。同时，讨论了利用CSS定位和伪类:hover来增强用户体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 43px;
				height: 42px;
				background: url(../img/logo.jpg) no-repeat -46px -47px;
			}
			/* .box:hover{
				width: 43px;
				height: 42px;
				background: url(../img/logo.jpg) no-repeat -46px -2px;
			} */
			.box1{
				width: 44px;
				height: 44px;
				background: url(../img/logo.jpg) no-repeat;
			}
		/* 	.box1:hover{
				width: 44px;
				height: 44px;
				background: url(../img/logo.jpg) no-repeat 0 -45px;
			} */
			.box2{
				width: 44px;
				height: 44px;
				background: url(../img/logo.jpg) no-repeat -90px 0;
			}
		/* 	.box2:hover{
				width: 44px;
				height: 44px;
				background: url(../img/logo.jpg) no-repeat -90px -45px;
			} */
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<div class="box1">
			
		</div>
		<div class="box2">
			
		</div>
	</body>
</html>

优点：css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

position: relative; 可以定位到自己想要的位置要记得和position: absolute;配合使用

加入hover 可以使背景图进行山东效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div ul li{
				list-style: none;
				background: url(./img/sqpurple.gif)no-repeat left center;
				padding-left: 15px;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>这是一个li标签</li>
				<li>这是一个li标签</li>
				<li>这是一个li标签</li>
			</ul>
		</div>
	</body>
</html>

使用精灵图更换li 标签前面的小圆点