摘要：今天做测试，遇到一道选择题。通过查找资料得知，也叫雪碧图，将网页中的多个小图标，集合到一整张图中。的优点有减少网页的请求，大大提高网页的性能。将多张图片拼成一张，可减少字节。命名方便，一次命名多次使用。的缺点有开发繁琐。
今天做测试，遇到一道选择题。
瞬间一脸懵逼，sprites是什么？
通过对各选项的分析，大致明白了几点：1、它是css属性。2、它与图片有关。3、它是背景图片。
然后就选了一个大概不靠谱的，成功的选错了。
通过查找资料得知，CSS Sprites 也叫雪碧（Sprite）图，将网页中的多个小图标，集合到一整张图中。
一般命名为“icon.png”，比如下图所示。
使用时，给元素背景插入这张图片，然后通过 background-position 来控制就好了。
background: url(icon.png) no-repeat;
.ul i-1{background-position: 0px 0px;}
.ul i-2{background-position: -30px 0px;}
.ul i-3{background-position: -30px -30px;}
.ul i-4{background-position: 0px -30px;}
这下就明白了，Sprites就是我们平常用的icon图片集合图。
Sprites的优点有：
1、减少网页的http请求，大大提高网页的性能。
2、将多张图片拼成一张，可减少字节。提高网页加载速度。
3、命名方便，一次命名多次使用。
Sprites的缺点有：
1、开发繁琐。
2、后期维护麻烦。（体验过的都知道）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51916.html
摘要：今天做测试，遇到一道选择题。通过查找资料得知，也叫雪碧图，将网页中的多个小图标，集合到一整张图中。的优点有减少网页的请求，大大提高网页的性能。将多张图片拼成一张，可减少字节。命名方便，一次命名多次使用。的缺点有开发繁琐。 今天做测试，遇到一道选择题。 showImg(https://segmentfault.com/img/bV4Jwh?w=739&h=396); 瞬间一脸懵逼，spr...
摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...
小编写这篇文章的一个主要目的，主要是用来给大家去做个相关的介绍，介绍的内容主要是涉及到相关的游戏实现，比如怎么去做游戏呢？比如说，怎么去做打豆豆的游戏呢？关于这方面的内容，下面就给大家详细解答下。 序言 前天晚上，玩起了在我们的学生时代经常玩的一些游戏，吃豆豆，但是我发现，在一局游戏当中，我们命的条数是比较少的，我根本不能吃完所有的豆豆，总是被敌人吃掉 于是，我在想怎么能够保证我达到吃完...
摘要：我们都知道属性用来指定背景图片应该出现的位置，可以使用关键字绝对值和相对值进行指定。使用相对值时，定位方式直观上不好理解。但应清楚，最基本的方法是根据绝对值定位。上图经过计算，背景图片左上角被定位在处，故背景图片被切除一半。 我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使...
摘要：持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是大公司可能更偏向一些基础或者原理布局一些经典算法方面。现将我在面试过程遇到的问题总结下。目前先传题目答案整理好之后再发布出来。 持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是：大公司可能更偏向一些JS基础或者原理、html布局、一些经典算法方面。小公司的面试更加侧重对经验和细节...
阅读 1890·2021-11-24 09:39
阅读 2534·2021-10-14 09:43
阅读 3317·2021-10-08 10:10
阅读 2264·2021-09-22 15:54
阅读 2339·2019-08-29 17:20
阅读 1573·2019-08-28 18:14
阅读 2373·2019-08-26 13:28
阅读 1111·2019-08-26 12:16
