css:CSS Sprites介绍
2018-02-26 10:54
323 查看
简介
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。优点
CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;CSS Sprites能减少图片的字节;
CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点
图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
相关文章推荐
- CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
- css空白边叠加的几种情况介绍
- 【小作品】名侦探柯南剧场版介绍网页(原生javascript html5 css)
- css考核点整理(七)-css sprites技术的使用心得
- css鼠标样式cursor介绍(鼠标手型)
- animate.css动画库使用方法介绍
- 使用CSS实现图片分割效果的简单方法介绍
- CSS特效介绍
- css后代选择器和子选择器的区别介绍
- CSS中margin属性介绍
- div+css布局中UL和LI的使用方法介绍
- CSS Sprites(CSS精灵)技术及其优化经验分享
- 掀开图片显示介绍的css效果
- 3html和css简单介绍
- css三种水平和垂直同时居中的方法介绍
- 什么是CSS Sprites(图片合并)技术 图文介绍
- css兼容教程(css中!important介绍)
- 页面脚本(js、css等)调试技巧介绍
- jQuery 设置 CSS 属性示例介绍
- CSS常用技巧介绍