[css] 解释下 CSS sprites的原理和优缺点分别是什么

我来说下我的观点
原理：
多张图合并成一张图优点&解决的问题hover效果，如果是多个图片，网络正常的情况下首次会闪烁一下。如果是断网情况下，就没图片了。sprites 就很好的解决了这个问题（第一次就加载好了）。合并了请求数制作帧动画方便缺点位置不好控制，有时候容易露底。。比如说3030的按钮，图片只有1212保不齐就漏出其他图片了。合成时候比较费时（有工具代替）位置计算费时（有工具代替）更新一部分的时候，需要重新加载整个图片，缓存失效。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 解释下 CSS sprites的原理和优缺点分别是什么相关推荐

css sprites原理,[css] 第17天解释下 CSS sprites的原理和优缺点分别是什么？
1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的"background-image ...
[css] 解释下为什么css的reset不建议直接这么写：*{ margin:0； padding:0；}？
[css] 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}? 1.*为通配符,使用通配符,即全局范围遍历,耗费浏览器效率,增大负荷: 2.会影响后面的 ...
[css] 解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
[css] 解释下css3的flexbox(弹性盒布局模型),以及它应用场景有哪些? 手机端中比较常用的三段式布局, 头尾固定高度中间自适应它可以修改父元素下所有子元素的位置和排序方式相对于浮 ...
[css] 解释下什么是PPI和DP？
[css] 解释下什么是PPI和DP? PPI(pixel per inch):像素密度,1英寸屏幕上显示的像素量.值越高,屏幕越细腻. DP(Density-independent pixel):安 ...
解释下原型继承的原理。
prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Animal构造函数 fun ...
[css] 请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
[css] 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 什么是浮动:我们在做布局的时候用到的一种技术,通过浮动可以让元素左右浮动,然后通过margin调整位置工作原理:使元素脱 ...
HTMLCSS学习笔记（二十九）——CSS Sprites的原理浏览器兼容
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式(页脚精灵图.雪碧图).它允许你将一个页面涉及到的所有零星图片都包含到一张大图中.这样一来,浏览器在加 ...
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
[css] 假如css的分号写在声明块之外，将会发生什么呢？解释下原因
[css] 假如css的分号写在声明块之外,将会发生什么呢?解释下原因这样写第一条规则的分号会被放到第二条规则的句首解析,导致第二条解析报错,从而略过.<style> p {color: ...

[css] 解释下 CSS sprites的原理和优缺点分别是什么

[css] 解释下 CSS sprites的原理和优缺点分别是什么

个人简介

主目录

[css] 解释下 CSS sprites的原理和优缺点分别是什么相关推荐

最新文章

热门文章