雪碧图 · 要努力

**iconfont 完事了。。。雪碧图过时了** ## 一、雪碧图的原理 **CSS Sprites** 因其英文被称为**雪碧图**。主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。 #### 主要优势 1、**减少网页的HTTP请求，提高页面性能** 2、减少图片命名的困扰 #### 主要优势 1、需要计算每个图片的位置 2、后期维护困难 ## 二、雪碧图的实现通过设置每个`<i></i>`对应的`background-position`来展现不同位置的图标。其中第一个参数代表x轴控制左右，第二个参数代表y轴控制上下。默认情况下为 ~~~undefined background-position: 0% 0%; ~~~ 当设置x为负数，相当于固定展现框不动，图片向左侧移动，展现的是相对右侧的内容。同理当y为负数，图片向上侧移动，展现的是相对下方的内容。 ``` ~~~xml <!DOCTYPE html> <html lang="cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试页面</title> <style> .item-list { border: 1px solid #333; padding: 0; width: 200px; background-color: #f8f8f8; } .item-list li { list-style: none; width: 160px; height: 40px; margin: 0 20px; border-bottom: 1px solid #dedede; line-height: 40px; } li i { background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg'); width: 30px; height: 24px; display: inline-block; vertical-align: middle; } .p1 i { background-position: -40px 0px; } .p2 i { background-position: 0px -24px; } .p3 i { background-position: 0px -48px; } .p4 i { background-position: 0px -72px; } .p5 i { background-position: -40px -72px; } .p6 i { background-position: -40px -48px; } .p7 i { background-position: 0px 0px; } </style> </head> <body> <div style="height:400px;"> <div style="width:600px;height:100%;margin-left:300px;"> <ul class="item-list"> <li class="p1"><i></i>商品A</li> <li class="p2"><i></i>商品B</li> <li class="p3"><i></i>商品C</li> <li class="p4"><i></i>商品D</li> <li class="p5"><i></i>商品E</li> <li class="p6"><i></i>商品F</li> <li class="p7"><i></i>商品G</li> </ul> </div> </div> <script src="js/jquery.min.js"></script> </body> </html> ~~~ ``` ![](https://img.kancloud.cn/11/fa/11faf71751b44725d07dfdfc9e36d0ad_344x471.png)