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为什么用雪碧图的优缺点的更多相关文章

  1. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  2. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  4. 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

  5. 图标字体 VS 雪碧图——图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

  6. V4.0到来了,css雪碧图生成工具4.0更新啦

    V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...

  7. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  8. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  9. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

随机推荐

  1. POJ 2014:Flow Layout 模拟水题

    Flow Layout Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 3091   Accepted: 2148 Descr ...

  2. VBA单元格自适应高亮操作

    1.单元格所在行和列高亮 第一种方式 Private Sub worksheet_selectionchange(ByVal target As Range) Cells.Interior.Color ...

  3. MySQL硬核干货:从磁盘读取数据页到缓冲池时,免费链表有什么用?

    1.数据库启动的时候,是如何初始化Buffer Pool的? 现在我们已经搞明白一件事儿了,那就是数据库的Buffer Pool到底长成个什么样,大家想必都是理解了 其实说白了,里面就是会包含很多个缓 ...

  4. winform集成cefSharp,与页面进行交互

    /// <summary> /// 为了使网页能够与winForm交互 将 com 的可访问性设置为 true /// </summary> [System.Runtime.I ...

  5. UVALive 4329 树状数组第二题

    大白书上的题目,比较巧妙的是其分析,为了求某个i点做裁判的时候的情况数,只要知道左边有多少比它小的记为ansc,右边有多少比它小的记为ansd,则总种数,必定为 ansc*(右边总数-ansd)+an ...

  6. 协程与异步IO

    协  程 协程,又称微线程,纤程. 协程的优势:              协程的特点在于是一个线程执行.              协程的最大优势是极高的执行效率,因为子程序切换不是线程切换,而是由 ...

  7. Linux--CentOS7启用网卡

    参考 http://www.centoscn.com/CentosBug/softbug/2015/0823/6039.html Centos7默认是不启用有线网卡的,需要手动开启. 改完保存退出

  8. 踩一踩win7安装neo4j的坑

    本文使用zip解压方式安装,下载社区版zip 解压到喜欢的文件夹,然后配置环境变量NEO4J_HOME=D:\neo4j-community-3.5.5(自己的解压目录) 配置Path=%NEO4J_ ...

  9. CEO、COO、CFO、CTO、CIO是什么意思/?

    CEO Chief Executive Officer 首席执行官 COO Chief Operating Officer 首席运营官 CFO Chief Financial Officer 首席财务 ...

  10. UVA 10158 并查集的经典应用

    这个题目一看就是用并查集,有N个国家代表,在M行给出两两之间的关系,敌人或者朋友,(当然如果该关系跟已知关系冲突,则输出-1) 关系的几个约束条件时这样的 在朋友方面,朋友的朋友就是自己的朋友,这个就 ...