CSS精灵图的原理与使用方法介绍


Posted in HTML / CSS onMarch 17, 2022

I.精灵图介绍

首先,我们先介绍一下什么是精灵图

先强调一点哈,精灵图和下面这个玩意儿没啥关系

CSS精灵图的原理与使用方法介绍

它的名字是这么来的:

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

由于精灵图最早诞生之初,不像位图一样是整张转换数据后加载出来的,而是“悬浮”于帧缓冲中数据之上,不影响其中数据,就像幽灵或精灵一样,因此得名精灵图

精灵图要解决的是下面的这个问题:

CSS精灵图的原理与使用方法介绍

图中左侧是一个浏览器,右侧是一个服务器,假设我们正在使用浏览器,向某网站发起了请求,这个请求可能是请求访问该网站的官网,此时从网络角度看,我们发起的是HTTP请求,HTTP代表了网络协议,于是服务器收到请求后,会返回给我们需要的网页,此时重点来了

服务器收到请求后,从它的内部搜索对应的HTML文档,在这个例子中,它搜索的是网站的官网HTML页面,与此同时,如果该页面本身有图像,那么这些所有的图像会以一个一个的url的形式返回,而后在进一步加载中,每一个url可能再发起一次HTTP请求,如果此时使用的是非持续的HTTP连接,那么TCP带来的RTT时延是很可观的,因此为了减少时延,精灵图诞生了:

精灵图把网页中所需的所有的小图片,都集成在一张图上,通过修改图片的定位,达到一张图顶n张图的效果,加载时只需要加载一张图片即可!

最后的最后,强调一下,精灵图不是一项新的功能,而是一个新技术或新思想,它的实现是由旧的功能解决的

II.精灵图的实现方式:拼出你的名字

那么精灵图是怎么实现的呢?这里举一个小例子:

我先给一张图片:

CSS精灵图的原理与使用方法介绍

好了,那么接下来我提出需求:

仅用上面的一张图,把你的名字的拼音全拼显示在页面上

那么第一时间,如果有前端CSS基础你想到的方法是什么呢

答案是:背景图片 + 背景图片定位!

详细的步骤可以分为下面的两步

1️⃣ 首先,我们把图片放入一个指定大小的“盒子”中做背景,这个盒子的大小设置的和图片上的一个单元一样大以本例来说,盒子的尺寸就是一个图片上一个字母的大小

2️⃣ 而后通过背景图片定位,我们把该单元刚好定位到这个盒子中,此时就只有该单元被显示了出来,其他单元将由于盒子的大小有限而不会被显示

CSS精灵图的原理与使用方法介绍

上图是我对实现步骤的一个图解,其中,最里面蓝色的和最外面黄色的区域,其实是一张图片,蓝色区域是黄色的整图的一个单元,而红色是我们定义的盒子,可以看到盒子的大小应该与小单元一致(这里盒子稍微大一点,是由于方便大家观看,实际中二者应该是重合关系)

好了,那么现在再介绍一下在网页中,坐标轴与实际中的区别

CSS精灵图的原理与使用方法介绍

这区别使我们在做精灵图的定位时,要注意取值可能要加一个负号!

最后简单放一下上面显示你的名字的部分源码:

.l{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.o{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.b{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.s{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.t{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.e{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}
 
.r{
    background-img : url(pic.jpg);
    background-position : -1px -274px;
}

大家注意,代码中url需要换上精灵图的url,定位按照我上面的介绍即可。

III.软件辅助定位

最后给大家推荐一款实现辅助定位的软件:Adobe Firework

它的使用方法也很简洁:

只需要把图片导入,选择切片工具,之后即可进行切片,我们把需要切片的单元切出来,在软件下方就会显示出它的坐标,复制该坐标,我们就轻松定位到了单元!

由于Adobe Firework已经停止更新了,所以不是很好找到下载地址,这里我给一个临时地址,供大家下载和学习使用

链接: https://pan.baidu.com/s/11eiPuCfS6RGR72NCgSWL8g?pwd=c8w5 

提取码: c8w5

到此这篇关于CSS精灵图的原理与使用方法介绍的文章就介绍到这了,更多相关CSS精灵图使用方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 #HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
jQuery select的操作实现代码
2009/05/06 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
综合测评自我鉴定
2013/10/08 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
测试工程师职业规划书
2014/02/06 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
学风建设主题班会
2015/08/17 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis