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;
    }
  }

　　渲染後得到如下效果