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 ...
随机推荐
- DLL对应的导入库一定会生成的
测试代码: #pragma once #define TESTDEPEND_EXPORTS #ifdef TESTDEPEND_EXPORTS #define TESTDEPEND_API __dec ...
- python + selenium +win32gui + winspy 实现图片上传
过程:模拟点击上传按钮,打开Windows对话框,编辑栏输入文件路径(或网址)点击确定.网上随便找了一个进行测试. 点击后出现Windows上传对话框 用 winspy 来检测窗口的句柄 python ...
- 【转帖】使用容器化和 Docker 实现 DevOps 的基础知识
使用容器化和 Docker 实现 DevOps 的基础知识 https://www.kubernetes.org.cn/6730.html 2020-02-24 15:20 灵雀云 分类:容器 阅读( ...
- uniapp 初始化项目
const baseUrl = 'http://10.92.1.17:6601/videoapi/'; //const baseUrl = '/videoapi/'; //对于 GET 方法,会将数据 ...
- ubuntu服务器上配置tomcat
前言 嗯,最近想在自己的腾讯云服务器上跑个项目玩玩,由于服务器是重装的系统,所以,只能自己手动装tomcat. 不过,tomcat是基于java的,必须又java环境tomcat才能够使用,因此首先要 ...
- axios 等待同步请求用法及多请求并发
axios等待同步请求 直接上代码 首先在函数中返回一个Promise对象,在调用函数使用同步函数,调用目标函数使用await等待即可 参考http://www.cnblogs.com/cckui/p ...
- 数据处理pandas
1.缺失值时间戳不为NaN,为NaT, 同样判断都为isna()或notna()方法2.删值\去重 df.dropna() df.drop_duplicates() 3.上下值插值 df.fillna ...
- MySQL的InnoDB的幻读问题
MySQL InnoDB事务的隔离级别有四级,默认是“可重复读”(REPEATABLE READ). 未提交读(READ UNCOMMITTED).另一个事务修改了数据,但尚未提交,而本事务中的SEL ...
- jsp/servlet编码原理
转自:http://janwer.iteye.com/blog/150226 首先,说说 JSP/Servlet 中的几个编码的作用 在 JSP/Servlet 中主要有以下几种设置编码的方式: pa ...
- 3)在View中添加LBUTTONDOWN(标准消息)
1)消息一共分为四类: (1)标准消息-->以WM_ 开头的都是标准消息 (2)命令消息----> 菜单 工具条 快捷键(两个按键的组合是快捷键,一个按键是 WM_KEYDOWN( ...