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 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
ucenter通信原理分析
2015/01/09 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP错误处理函数
2016/04/03 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
js闭包学习心得总结
2018/04/17 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python区块及区块链的开发详解
2019/07/03 Python
python装饰器代替set get方法实例
2019/12/19 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python try...finally...的实现方法
2020/11/25 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
优秀的导游求职信范文
2014/04/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2015年重阳节主持词
2015/07/04 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android