CSSSprite的应用Sprite

CSSSprite，CSSSprite，也叫CSSSprite，是一种图像拼接技术。方法是将多个小图标和背景图片组合成一张图片，然后使用CSS背景定位来显示图片中需要显示的部分。Sprite图的使用场景静态图片不随用户信息的变化而变化。图片小，容量比较小（2~3k）。图片负载比较大。目的减少Http请求数，加快内容显示。因为每次请求都会和服务器建立连接，建立连接需要额外的时间。在使用精灵图之前，我们需要知道每个图标在精灵图中的位置。从上图不难看出，每个小图标（icon）在精灵图中的起始位置是在整个精灵图中。例如第一个图标（裙子）在sprite图片中的起始位置为x:0,y:0，第二个图标（鞋子）在sprite图片中的起始位置为x:0,y:50px，则精灵图像中第三个图标（足球）的起始位置为x:0，y:100px，依此类推。显示每张图片相对于精灵图片的起始位置。以上面的Sprite图片为例（实际Sprite图片中每张小图的起始位置与上面的显示图片不同），用一个Demo来说明其用法。HTML

CSSulli{列表样式：无；保证金：0；填充：0；}a{颜色：#333；文本装饰：无；}.sidebar{宽度：150px；边框：1px实心#ddd；背景：#f8f8f8；填充：010px；margin:50pxauto;}.sidebarli{border-bottom:1pxsolid#eee;高度：40px；行高：40px；文本对齐：居中；}.sidebarlia{font-size:18px;}.sidebarlia:hover{color:#e91e63;}.sidebarli.spr-icon{display:block;向左飘浮;高度：24px；宽度：30px；背景：url(css-sprite.jpg)不重复；margin:8px0px;}.sidebarli.icon2{background-position:0px-24px;}.sidebarli.icon3{background-position:0px-48px;}.sidebarli.icon4{background-position:0px-72px;}.sidebarli.icon5{background-position:0px-96px;}.sidebarli.icon6{background-position:0px-120px;}.sidebarli.icon7{background-position:0px-144px;}.sidebarli.icon8{背景位置：0px-168px;}为什么使用sprite图片时background-position属性的值为负数上面的例子已经说明了如何使用sprite图片，但是初学者可能会对sprite图片中的background-position属性取负值产生疑惑.这个问题其实不难回答。如果细心的话，应该很早就发现了使用负数的根本原因。这里我们以上面的demo为例来分析一下这个问题。上面的span标签是一个长宽为24*30px的容器。使用背景图片时，背景图片的初始位置将从容器的左上角开始覆盖整个容器。但是，容器的大小限制了背景图像的大小。容器之外的部分被隐藏。如果设置background-position:00，则表示背景图片相对于容器（span标签）的位置x-axis=0；y-axis=0作为背景图片的起始位置来显示图片。所以如果需要在容器中显示第二个图标，就意味着精灵图片的x轴方向要向左移动，精灵图片向左移动它的值会被设置为负数左，y轴方向也是如此。制作PS手工拼图使用Sprite工具自动生成（CssGaga或CssSprite.exe）CssSprite雪碧工具，已经在github上开源，地址：https://github.com/iwangx/sprite优缺点优点：1.加快网页加载速度对于网页上的每张图片，向浏览器发起一次下载图片的请求，浏览器同时接受的请求数为10，可以请求的请求数一次处理是两次。2.后期维护方便本工具可以直接选择图片拼接图片。当然，你也可以移动里面的图片，自己布置你的精灵图片。更换图片时，只需要改变图片的位置即可。直接生成代码，简单易用。3.CSSSprites可以减少图片的字节数。对比过很多次，3张图片合并成1张图片的字节总是小于这3张图片的字节之和。4.解决了网页设计师为图片命名的烦恼。只需为一组图片命名，无需为每个小元素命名，从而提高了网页的制作效率。5、更换款式方便。只需在一张或几张图片上修改图片的颜色或风格，整个网页的风格就可以改变。维护起来更方便。缺点：合并图片时，需要将多张图片有序合理地合并为一张图片，并留出足够的空间，防止版面出现不必要的背景；这些都还好，最痛苦的是在宽屏和高分辨率屏幕下的Adaptivepages，如果你的图片不够宽，很容易把背景弄坏；至于可维护性，这是一把通用的双刃剑。可能有的人喜欢，有的人不喜欢，因为每次换图片都要给这张图片删除或者添加内容，显得有些繁琐。而统计图片的位置（尤其是这种几千px的图片）也是一件比较难受的事情。当然，在性能的口号下，这些都是可以克服的。由于图片的位置需要固定为一个绝对值，这样就失去了居中等灵活性。CSSSprites一般只能用在固定大小的盒子（box）中，这样可以遮住不该看到的部分。也就是说，CSSSprites不适用于需要非单向平铺背景和需要网页缩放的情况。参考文章：https://juejin.im/post/58eb06...https://segmentfault.com/a/11...https://blog.csdn.net/bingkin...MOOC:https://www.imooc.com/learn/93（教程）https://www.imooc.com/code/1511（练习）