html为什么用雪碧图的优缺点
CSS Sprite(雪碧图/精灵图)
1 概念解释
将小图标和背景图像合并到一张图片上,然后利用css的背景/定位来显示需要显示的图片部分。
2 优点
① 减少加载网页图片时对服务器的请求次数
因为我们在使用雪碧图之后,本来需要多次请求的图片,我们可以一次请求过来,然后使用background-position
减少了该页面向服务器请求的次数,间接地优化了该页面的性能
② 图片体积较少,提高页面的加载速度
③ 兼容性好, IE >= 8 IE=7(png8)
④ 减少鼠标滑过的一些bug
3 缺点
① 制作雪碧图比较麻烦
② 样式的书写,定位比较麻烦
4 原理
a) 将所有图标集合至一张透明图片上
b) background设置为背景图
c) background-position定位每一个图标的位置
1-5 示例
/* 调用雪碧图 */
.icons{
background: url(img/icons.png),no-repeat;
display: inline-block;
font-style: normal;
}
/* 修改位置 */
.icon_1 {
background-position: 0px -152px;
}
.icon_2 {
background-position: 0px -180px;
}
html为什么用雪碧图的优缺点的更多相关文章
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
- V4.0到来了,css雪碧图生成工具4.0更新啦
V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
随机推荐
- POJ 2014:Flow Layout 模拟水题
Flow Layout Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 3091 Accepted: 2148 Descr ...
- VBA单元格自适应高亮操作
1.单元格所在行和列高亮 第一种方式 Private Sub worksheet_selectionchange(ByVal target As Range) Cells.Interior.Color ...
- MySQL硬核干货:从磁盘读取数据页到缓冲池时,免费链表有什么用?
1.数据库启动的时候,是如何初始化Buffer Pool的? 现在我们已经搞明白一件事儿了,那就是数据库的Buffer Pool到底长成个什么样,大家想必都是理解了 其实说白了,里面就是会包含很多个缓 ...
- winform集成cefSharp,与页面进行交互
/// <summary> /// 为了使网页能够与winForm交互 将 com 的可访问性设置为 true /// </summary> [System.Runtime.I ...
- UVALive 4329 树状数组第二题
大白书上的题目,比较巧妙的是其分析,为了求某个i点做裁判的时候的情况数,只要知道左边有多少比它小的记为ansc,右边有多少比它小的记为ansd,则总种数,必定为 ansc*(右边总数-ansd)+an ...
- 协程与异步IO
协 程 协程,又称微线程,纤程. 协程的优势: 协程的特点在于是一个线程执行. 协程的最大优势是极高的执行效率,因为子程序切换不是线程切换,而是由 ...
- Linux--CentOS7启用网卡
参考 http://www.centoscn.com/CentosBug/softbug/2015/0823/6039.html Centos7默认是不启用有线网卡的,需要手动开启. 改完保存退出
- 踩一踩win7安装neo4j的坑
本文使用zip解压方式安装,下载社区版zip 解压到喜欢的文件夹,然后配置环境变量NEO4J_HOME=D:\neo4j-community-3.5.5(自己的解压目录) 配置Path=%NEO4J_ ...
- CEO、COO、CFO、CTO、CIO是什么意思/?
CEO Chief Executive Officer 首席执行官 COO Chief Operating Officer 首席运营官 CFO Chief Financial Officer 首席财务 ...
- UVA 10158 并查集的经典应用
这个题目一看就是用并查集,有N个国家代表,在M行给出两两之间的关系,敌人或者朋友,(当然如果该关系跟已知关系冲突,则输出-1) 关系的几个约束条件时这样的 在朋友方面,朋友的朋友就是自己的朋友,这个就 ...