CSS学习笔记——精灵图(sprite)

最新推荐文章于 2024-05-14 07:11:51 发布

kk楷楷

最新推荐文章于 2024-05-14 07:11:51 发布

阅读量2.6w

点赞数 28

分类专栏：前端 css学习文章标签：定位 css

本文链接：https://blog.csdn.net/weixin_45331887/article/details/116448227

版权

前端同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

css学习

3 篇文章 0 订阅

订阅专栏

CSS学习笔记目录

一、什么是精灵图？
二、精灵图的优点
三、精灵图的基本用法
总结

一、什么是精灵图？

所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。精灵图如下：
在这里插入图片描述

二、精灵图的优点

采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。

三、精灵图的基本用法

1.工具：PS、HBuilder
2.素材：任意一张精灵图都行

1、打开ps导入精灵图

这里拼出的字母案例为KK
在这里插入图片描述

2、测量字母的大小及坐标

通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
打开窗口菜单栏中的信息，可以查询字母width、height、x轴和y轴的信息。
将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。
在css中编写style样式，通过background-position定位到字母所在的位置。

在这里插入图片描述

3、效果图

在这里插入图片描述

4、代码实现

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>精灵图的使用</title>
		<style>
			/* 共同的样式 */
			div{
				background: url(../images/images/abcd.jpg) ;/* 导入精灵图资源 */
				float: left;/* 设置向左浮动 */
			}
			.box1{
				/* 盒子的高度宽度要和精灵图的大小一致 */
				width: 106px;
				height: 107px;
				background-position: -494px -142px;/* 分别对应x 和 y 轴 */
				/* 在ps中进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
			}
			
			.box2{
				/* 盒子的高度宽度要和精灵图的大小一致 */
				width: 106px;
				height: 107px;
				background-position: -494px -142px;/* 分别对应x 和 y 轴 */
				/* 在ps中进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

总结

精灵图主要针对小的背景图片使用。
精灵图的显示主要借助于背景位置来实现——background-position
一般情况下精灵图都是负值。
网页中的坐标：x轴右边是正值，左边是负值，y轴也是和x轴一样的原理。

kk楷楷

关注

28
点赞
踩
139

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习笔记——精灵图(sprite)

CSS学习笔记目录一、什么是精灵图？二、精灵图的优点三、精灵图的基本用法1、打开ps导入精灵图2、测量字母的大小及坐标3、效果图4、代码实现总结一、什么是精灵图？所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。精灵图如下：二、精灵图的优点采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。使用精灵图可以有效减少服务
复制链接

扫一扫