精灵图

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

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

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

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

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

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

Iconfont图标使用

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

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

Android相机开发那些坑

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

23.4K5
来自专栏数据小魔方

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

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

3628
来自专栏腾讯Bugly的专栏

Android之实现妙趣横生的粘连布局

1概述 在手机QQ中,有一个功能叫“一键下班”,无论界面有多少信息,只要你不想看,就可以手指一滑,将他们全部消灭。据说这个功能专为红点恐惧症、信息阅读强迫症以及...

3493
来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

882
来自专栏我有一个梦想

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

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

2659
来自专栏iOS开发随笔

SCNView

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

31613
来自专栏BestSDK

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

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

2995
来自专栏Coding迪斯尼

使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

1795
来自专栏灯塔大数据

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

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

4484
来自专栏Guangdong Qi

iOS开发常用之 图表

871

扫码关注云+社区