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

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

精灵技术的本质

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

精灵技术的使用

css 精灵是将网页中的一些背景图像整合到一张大图中(精灵图)。各个网页元素通常只需要精灵图中不同位置的某个小图,想要精确定位到精灵图中的某个小图,就需使用到css的background-imagebackground-repeatbackground-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>

效果图:
在这里插入图片描述
最后:背景图片很少的情况下,没必要使用精灵图,维护成本比较高。背景图片比较多的情况下,可以建议使用精灵技术。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值