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

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

2.优点

(1)CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

(2)CSS Sprites能减少图片的字节；

(3)CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

(1)图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

(2)图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

(3)图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

(4)可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能(最好)往下追加图片，但这样增加了图片字节。

原文链接：https://blog.csdn.net/sunnyjingqi/article/details/83064872

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

[css] 解释下 CSS sprites的原理和优缺点分别是什么
[css] 解释下 CSS sprites的原理和优缺点分别是什么我来说下我的观点原理: 多张图合并成一张图优点&解决的问题hover效果,如果是多个图片,网络正常的情况下首次会闪烁一下. ...
解释下原型继承的原理。
prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Animal构造函数 fun ...
[css] 请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
[css] 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 什么是浮动:我们在做布局的时候用到的一种技术,通过浮动可以让元素左右浮动,然后通过margin调整位置工作原理:使元素脱 ...
CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
17 Java面试之css
一.CSS 全称及其作用是什么? 答: 1).Cascading Style Sheets (层叠样式表) 2).CSS 能够对网页中元素位置的排版进行像素级精确控制. 3).支持几乎所有的字体字号样 ...
[css] 你知道什么是流体排版吗？说说它的原理是什么？
[css] 你知道什么是流体排版吗?说说它的原理是什么? 在文档流中,内联元素按内联方向显示,即词语在依据文件写作模式的句子中表示的方向.块元素则一个接一个地显示,就像该文档的写作模式中的段落一样.因 ...
[css] 解释下为什么css的reset不建议直接这么写：*{ margin:0； padding:0；}？
[css] 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}? 1.*为通配符,使用通配符,即全局范围遍历,耗费浏览器效率,增大负荷: 2.会影响后面的 ...
[css] 解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
[css] 解释下css3的flexbox(弹性盒布局模型),以及它应用场景有哪些? 手机端中比较常用的三段式布局, 头尾固定高度中间自适应它可以修改父元素下所有子元素的位置和排序方式相对于浮 ...
[css] 假如css的分号写在声明块之外，将会发生什么呢？解释下原因
[css] 假如css的分号写在声明块之外,将会发生什么呢?解释下原因这样写第一条规则的分号会被放到第二条规则的句首解析,导致第二条解析报错,从而略过.<style> p {color: ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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