摘要：精灵图雪碧图把一堆小图片整合在一张大图上，通过背景图片相关设置背景图片背景图是否重复背景图定位，显示图片，减轻服务器对图片的请求数量优点减少网页的请求，提高页面性能图片命名上的困扰更换风格方便缺点必须限定容器大小，符合背景图片元素的位置，需
css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
优点：
1、减少网页的HTTP请求，提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点：
1、必须限定容器大小，符合背景图片元素的位置，需要计算
2、维护比较麻烦
使用步骤：
1、制作一张具有多状态的拼合图片，需要按照一定规律处理
2、给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
3、通过背景图定位（background-position）控制不同的显示状态
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1905.html
摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...
摘要：以上，从分层组织，模块化，使用时注意低权重原则，以及巧用雪碧图阐述了提高代码质量的四个方面。编写高质量代码前端开发修炼之道曹刘阳 分层组织CSS 我们应用CSS的能力应该分成两部分：一部分是CSS的API，重点是如何用CSS控制页面内元素的样式；另一部分是CSS框架，重点是如何对CSS进行组织。 推荐一种组织CSS的方法： base.css + common.css + page.c...
摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...
摘要：什么是打开一些网站可以看到每张图片相应需要请求一次后台，如下图请求是比较消耗资源的，当网站中存在较多的请求时，性能就会相应的降低，加载就会变慢，甚至卡住。减少请求能提高性能，就是通过合并多张图片达到减少请求目的的一种技术。 什么是css sprites? 打开一些网站可以看到每张图片相应需要请求一次后台，如下图： showImg(http://segmentfault.co...
阅读 1778·2021-11-24 09:39
阅读 2272·2021-09-30 09:47
阅读 4124·2021-09-22 15:57
阅读 1852·2019-08-29 18:36
阅读 3533·2019-08-29 12:21
阅读 563·2019-08-29 12:17
阅读 1218·2019-08-29 11:25
阅读 701·2019-08-28 18:26
