html與emoji表情

来源:https://www.cnblogs.com/radishbear/archive/2020/04/04/12633155.html
-Advertisement-
Play Games

前言 做項目涉及表情在網頁上顯示。稍微研究了一下實現方案,整體思路不複雜,就是稍微涉及到一些新概念和新方法。 精靈圖 精靈圖又稱雪碧圖,簡單來說就是一種把很多小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。註意這張精靈圖是png格式,除表情外其他區域都是透明的。 精靈圖解決的問題是:很多網 ...


前言

  做項目涉及表情在網頁上顯示。稍微研究了一下實現方案,整體思路不複雜,就是稍微涉及到一些新概念和新方法。

精靈圖

  精靈圖又稱雪碧圖,簡單來說就是一種把很多小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。註意這張精靈圖是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;
    }
  }

  渲染後得到如下效果


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作者 | Function | 前端時空 Vue 和 React 中的 key 到底有什麼用? key 是給每一個 vnode 的唯一 id,依靠 key,我們的 diff 操作可以更準確、更快速。 對於簡單列表頁渲染來說 diff 節點也更快,但會產生一些隱藏的副作用,比如可能不會產生過渡效果,或 ...
  • 一、多重背景圖片 1.background:url() 重覆類型 位置信息,url() 重覆類型 位置信息; 中間使用英文逗號隔開 2.第二種方法就是分開寫 background-image:url(),url(); background-repeat:重覆類型,重覆類型; background-p ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12635080.html 上拉載入更多 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- ref="swiper"能 ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html 下拉刷新 下拉刷新--變化提示文字 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- re ...
  • 最近編寫響應式的時候在使用@media用的不是很順手,所以就記錄一下方便查看 基本語法: @media +( not | only) + 媒體類型 +(and+ 媒體查詢) 我們首先瞭解一下媒體類型,常用的不多,就幾個:screen(電腦屏幕) ,print (列印或者列印預覽),all(所有設備) ...
  • ```javascript ``` ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200404222513323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text... ...
  • 案例: 父組件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!- ...
  • 博主:www 原文地址: https://www.cnblogs.com/wangjian8888/p/6092158.html。 字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD 樣式 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...