web前端sprite，精灵图，雪碧图

最新推荐文章于 2024-05-16 17:48:19 发布

fjxylin

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量726

点赞数

分类专栏： html 前端优化文章标签：前端精灵图雪碧图 sprite

本文链接：https://blog.csdn.net/qq_22154647/article/details/103598525

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端优化

3 篇文章 0 订阅

订阅专栏

css sprite

俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；
优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题

缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位

精灵图制作：

photoshop选择透明图层，将需要的图标和图片放入

测试用图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				margin: 50px;;
			}
				
			#box a{
				display: block;
				width: 74px;
				height: 20px;
				border: 1px solid #ccc;
				color: black;
				font-size: 12px;
				text-decoration: none;
				text-align: center;
				border-top: none;
				padding-top: 54px;
				background-image: url(icon.png);
			}
			#box #zone{
				border-top:1px solid #CCCCCC;
				background-position: -17px 4px;
				background-repeat: no-repeat;
			}
			#box #zone:hover{
				background-position: -17px -98px;
			}
			#box #mail{
				background-position: -12px -186px;
				background-repeat: no-repeat;
			}
			#box #mail:hover{
				background-position: -12px -286px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<a href="#" id="zone">空间</a>
			<a href="#" id="mail">邮箱</a>
		</div>

	</body>
</html>

fjxylin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端sprite，精灵图，雪碧图

css sprite俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位精灵图制作：photoshop选择透明图层，将需要的图标和图片放入测试用图：&l...
复制链接

扫一扫

专栏目录