精灵图

什么是精灵图? 就是将几张较小的图片放在一张大图上

为什么要有精灵图? 最早的时候网速十分有限,为了提升用户体验,我们会将一张大图分解成多张小图来提高页面打开速度,但是网速得到了提升,为了能够让服务器承载更多的请求,我们要减少浏览器对服务器的请求,最直接的方式,就是将多张较小的图片放在一张大图上,从而减轻服务器的压力。而将多张小图放到一张大图上的操作就叫做精灵图,也可以叫做雪碧技术 也叫做css sprite

精灵图的使用 一张大的图片上有很多小的图片,那么如何将这个小的图片拿出来呢? 1.如果我们需要的一张图片在精灵图上,必须要了解这个图片的大小以及在精灵图上的位置 比如:新浪网上的搜索按钮,首先得到它的宽高和位置

2.在页面上将这个图片显示出来,在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样 比如:我们要html页面上放一个div,宽高为图片的搜索按钮的宽高

3.将精灵图设置为容器的背景图片,并且根据图片所在的位置将背景图片进行平移

制作精灵图 1.精灵图必须是一些小的图片 2.精灵图的多个小图之间一定要留有足够的间隙 3.精灵图的大小一定要大于所有图片中最大的那个 4.完成精灵图以后一定要在精灵图下方留有足够的空隙,方便将来再次添加其它的精灵图 5.如果是页面上一个像素的背景图片不要放在精灵图上面

Iconfont图标使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius(水晶仪表)系列5——统计图综合运用

今天继续跟大家分享水晶仪表系列的第5篇——统计图的综合运用。 本例是一个通过展现某银行前八年的存款储蓄以及贷款数据,通过预计后两年的存款储蓄增长率、贷款增长率等...

35811
来自专栏BestSDK

表格设计的六种打开方式,正确提升表格的阅读效率

在设计数据类产品、后台配置产品时,PD 常常会指着一块地方说「这儿放个表格,需要有balabala…」,而表格的结构不外乎这几种类型: 垂直布局 水平布局 矩阵...

3115
来自专栏知道一点点

推荐12个最好的 JavaScript 图形绘制库

 众多周知,图形和图表要比文本更具表现力和说服力。图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易...

3543
来自专栏我有一个梦想

UE4新手编程之创建空白关卡和添加碰撞体

让我们接着上次继续学习UE4引擎,今天我们学习下怎样创建空白的关卡以及添加碰撞物体。 一. 创建空白关卡 1) 点击文件 -> 新建关卡(或者按快捷键Ctrl+...

2909
来自专栏Guangdong Qi

iOS开发常用之 图表

1401
来自专栏数据小魔方

数据标签太长了,怎么办……

今天给大家讲解在图表中长数据标签的特殊处理方法! ▽ 如果你的图表要求必须添加数据标签的话 最大的困惑就是对于哪些特别长的数据标签 加上之后图表是这样的 ? 看...

3708
来自专栏QQ空间开发团队的专栏

Android相机开发那些坑

这篇文章总结了Android相机开发的相关知识、流程,以及容易遇到的坑,希望能帮助今后可能会接触Android相机开发的朋友快速上手,节省时间,少走弯路。

23.6K5
来自专栏灯塔大数据

浅谈数据可视化那些可用的工具和示例【可视化】

什么是数据可视化?数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。为了有效地传达思想概念,美学形式与功能需要齐头并进,通过直观地传达关键的方面与特...

4784
来自专栏iOS开发随笔

SCNView

在渲染过程过中,视图模型常常会出现锯齿边缘。这是因为模型是由多边形组成的,当显卡运算频率不够高,或者显存不够大的时候,“多边形”绘制速度比较慢,就会出现锯齿。此...

33613
来自专栏GIS讲堂

当我们遇到问题的时候改如何解决

问题 在Openlayer3中直接加载PNG图片,在API中提供了ImageStatic可以将图片展示出来,但是如何设置图片的imageExtent让图片能...

1762

扫码关注云+社区

领取腾讯云代金券