html与emoji表情

前言

　　作项目涉及表情在网页上显示。稍微研究了一下实现方案，总体思路不复杂，就是稍微涉及到一些新概念和新方法。

精灵图

　　精灵图又称雪碧图，简单来讲就是一种把不少小图片拼成一张大图的图片形式。下图就是表情项目中的精灵图。注意这张精灵图是png格式，除表情外其余区域都是透明的。

　　精灵图解决的问题是：不少网页在首次加载的时候都须要加载不少的小图片，而考虑到在同一时间，服务器拥堵的状况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

　　项目中就将从上面的精灵图取出一个个表情。

背景定位

　　在精灵图上，每一个表情都有本身的位置和长宽。例如笑哭表情，位置是-192px -128px，长宽均为64px。

　　因此用如下的css格式就能定位到这个表情。

width: 64px;
    height: 64px;
    background-position: -192px -128px !important;
    background: url("assets/img/emoji_sprite.png");

　　其中的background后的地址就是精灵图的位置了。

表情与文字混合

　　知道怎么切出精灵图后其余操做就简单了。把文字和表情都用span标签存放，有如下实例：

<div>
      <span>文字与表情</span>
      <span class="emoji-item"></span>
      <span>混合显示</span>
  </div>

.emoji-item {
    width: 64px;
    height: 64px;
    background-position: -192px -128px !important;
    background: url("assets/img/emoji_sprite.png");
    display: inline-block;
    &:hover {
      cursor: pointer;
    }
  }

　　渲染后获得以下效果