CSS sprites (css 精灵)实现教程

最新推荐文章于 2025-05-03 14:47:22 发布

故里明月

最新推荐文章于 2025-05-03 14:47:22 发布

阅读量554

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web开发

个人博客地址：https://wuliqun.cn/ 所有博客内容由本人拥有

本文链接：https://blog.youkuaiyun.com/liqun_super/article/details/90295087

Web开发专栏收录该内容

17 篇文章

订阅专栏

博客介绍了CSS精灵的基本规则，包括静态、小容量、加载量大等特点，其优点是能减少HTTP请求数量、加速内容显示。还说明了精灵图由css background - position属性控制，原理是控制层的显示区域。此外，介绍了雪碧图的生成方式，如PS手动拼图和用sprite工具自动生成。

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

首先介绍一下css精灵的基本规则：

1.静态图片，不随用户信息的变化而变化

2.小图片，图片容量比较小

3.加载量比较大

优点：有效较少http请求数量，加速内容显示，每一次请求，就会与服务器建立一次链接。

你们所看到的精灵图都是由css background-position属性所控制的

原理是：通过控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动

雪碧图的生成：PS手动拼图，使用sprite工具自动生成（工具 CssGaga）

安装地址：https://www.99css.com/1524/

现在我们开始步入正题：

首先我们创建一个页面，里面写上标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
		    h3,ul{
		    	margin: 0;
		    	padding: 0;
		    }
			ul{
				list-style: none;/*去掉ul的点*/
			}
			li h3{
				font-size: 14px;
				font-weight: 400 ;
			}
			li{
				display: block;
				height: 31px;
				line-height: 31px;  /*为了能让文字垂直居中*/
				overflow: hidden;   /*防止里面的元素内容溢出*/
				border-bottom: 1px solid  #DEDEDE;
			}
			.cat{
			   width: 150px;
			   background: #F8F8F8;
			   border: 1px solid #bbb
			}
			li i{
				display: inline;
				width: 24px;
				height: 24px;
				float: left;
				margin: 3px 8px 0px 7px;
				background:url(img/精灵背景图.png);
			}
			.cat-1 i{
				background-position: 0 0;
			}
			.cat-2 i{
				background-position: 0 -44px;
			}
			.cat-3 i{
				background-position: 0 -88px;
			}
			.cat-4 i{
				background-position: 0 -132px;
			}
			.cat-5 i{
				background-position: 0 -176px;
			}
			.cat-6 i{
				background-position: 0 -220px;
			}
			.cat-7 i{
				background-position: 0 -264px;
			}
			.cat-8 i{
				background-position: 0 -308px;
			}
			.cat-9 i{
				background-position: 120px -308px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="cat">
			<ul>
				<li class="cat-1">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-2">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-3">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-4">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-5">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-6">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-7">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-8">
					<i></i>
					<h3>服装内衣</h3>
				</li>
				<li class="cat-9">
					<i></i>
					<h3>其他分类</h3>
				</li>
			</ul>
		</div>
		
		
	</body>
</html>

页面完成

资源---->