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

2024-05-13 00:31:13

当用户访问一个网站时，需要向服务器发送请求。而网页上的每张图都需要经过一次请求才能展示给用户。
然而，一个网页中往往会应用很多小的背景图片作为装饰。当网页中的图像过多时，服务器就会频繁的接收和发送请求，这将大大降低页面的加载速度。为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了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>

效果图：

最后：背景图片很少的情况下，没必要使用精灵图，维护成本比较高。背景图片比较多的情况下，可以建议使用精灵技术。

前端学习之精灵技术(sprite)相关推荐

Web 前端学习之servlet技术(一)
Web 前端学习之servlet技术(一) Servlet技术简介手动实现Servlet程序要求: 实现如下功能 1.编写一个类去实现Servlet 接口 2.实现service 方法,处理请求 ...
web前端基础仏学习css精灵css sprite技术解析
说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到,说这个技术可以减少网站图片请求次数,当时还不是很理解,之后了解了一番,明白了其中的原理,故在此给大家分享一下. CSS ...
03前端学习之CSS3(2)
文章目录十四.用户界面样式: 1. 鼠标样式(cursor): 2. 轮廓(outline) 3. 防止拖拽文本域(resize): 4. 垂直对齐(vertical-align): 4.1 取出图 ...
CSS滤镜和精灵技术
CSS滤镜和精灵技术目录 CSS滤镜和精灵技术一.CSS滤镜(Filters) 二.CSS精灵技术(sprite) 一.CSS滤镜(Filters) CSS3 滤镜是对图像等图形元素执行视觉效果操 ...
前端学习路线+资源整合
前端学习路线由'技术胖前端学习路线'延展开来,加入一些自己觉得很好的资源.(持续整理中) 1.网络知识网络工作原理知识点:缓存.渲染原理.阻塞原理.浏览器本地存储.Web安全问题.事件循环机制 ...
五、pink老师的学习笔记——CSS精灵技术（sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

最新文章

热门文章