前端学习之精灵技术(sprite)

最新推荐文章于 2022-09-28 21:59:41 发布

Endless Daydream233

最新推荐文章于 2022-09-28 21:59:41 发布

阅读量818

点赞数

分类专栏：前端学习基础记录文章标签： css

本文链接：https://blog.csdn.net/gua222/article/details/107041937

版权

前端学习基础记录专栏收录该内容

57 篇文章 7 订阅

订阅专栏

在这里插入图片描述
当用户访问一个网站时，需要向服务器发送请求。而网页上的每张图都需要经过一次请求才能展示给用户。
然而，一个网页中往往会应用很多小的背景图片作为装饰。当网页中的图像过多时，服务器就会频繁的接收和发送请求，这将大大降低页面的加载速度。为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也叫css sprite、css 雪碧）。

精灵技术的本质

css 精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图片即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图称为精灵图（雪碧图）。

精灵技术的使用

css 精灵是将网页中的一些背景图像整合到一张大图中（精灵图）。各个网页元素通常只需要精灵图中不同位置的某个小图，想要精确定位到精灵图中的某个小图，就需使用到css的background-image、background-repeat、background-position属性进行背景定位。最关键的就是使用background-position属性进行精确的定位。

demo:(下图是某游戏官网的一张精灵图)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h3{
			background: url("img/sprite/index.png") no-repeat -2px -186px;
			height: 26px;
		}
		div{
			height: 125px;
			background:url("img/sprite/index.png") no-repeat 0 -220px;
		}
		h4{
			height: 24px;
			background:url("img/sprite/index.png") no-repeat -156px -109px;
		}
	</style>
</head>
<body>
	<h3></h3>
	<h4></h3>
	<div></div>
</body>
</html>