CSS精灵技术(sprite)原来可以这么轻巧

最新推荐文章于 2024-05-23 16:05:38 发布

空白

最新推荐文章于 2024-05-23 16:05:38 发布

阅读量759

点赞数 1

文章标签： css

原文链接：https://blog.csdn.net/weixin_45525272/article/details/107115124

版权

CSS精灵技术(sprite)

在这里插入图片描述

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

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

精灵技术使用

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

精灵图：

页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
	.box1{
		border: 1px solid black;/*加上边框可以方便看到此容器大小*/
		background: url(images/btns.png) -276px 0 no-repeat;
		height: 70px;
		width:260px;
	}
	.box2{
		border: 1px solid black;
		background: url(images/btns.png) 0 0 no-repeat;
		height: 70px;
		width:260px;
	}
	.box3{
		border: 1px solid black;
		background: url(images/btns.png) -551px 0 no-repeat;
		height: 70px;
		width:260px;
	}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

精灵图的制作

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

一般情况，小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

空白

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS精灵技术(sprite)原来可以这么轻巧

CSS精灵技术(sprite)图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。精灵技术本质简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背
复制链接

扫一扫