当前位置:网站首页>2021-01-11-雪碧图做表情管理器
2021-01-11-雪碧图做表情管理器
2022-08-09 10:03:00 【高桥靓仔】
雪碧图做表情管理器
雪碧图的原理:将所有的表情都放在一张大图上,然后使用background-image、 background-position、width、height属性去定位显示每个表情。(所以需要预先做一个表情定位的映射表)
//<i class="icon icon-home"></i>
:global {
.icon-s01 {
background-image: url(http://xdfe-new.s3.cn-east-2.jdcloud-oss.com/apps/xiaoduo-robot-merchant-platform/jd-emotions/sprite.png);
background-position: -24px 0;
width: 24px;
height: 24px;
}
.icon-s02 {
background-image: url(http://xdfe-new.s3.cn-east-2.jdcloud-oss.com/apps/xiaoduo-robot-merchant-platform/jd-emotions/sprite.png);
background-position: -144px 0;
width: 24px;
height: 24px;
}
...
}
边栏推荐
猜你喜欢
随机推荐
[Halcon&定位] 解决Roi区域外的模板匹配成功
JDBC中的增删改查操作
归并排序
浏览器的报错分类
免费下载天地图全国基础地理信息矢量数据的一种方法
慕课网-简易扑克牌游戏 思路清晰 简易版
Super detailed MySQL basic operations
京东物流与五菱将开发联名版定制产品
StratoVirt 中的虚拟网卡是如何实现的?
A little experience sharing about passing the CISSP exam at one time
Firebase+Facebook 授权 web 登录提示域名验证或跳转错误
Multi-threaded cases - timer
The GNU Privacy Guard
公里周日
KMP& sunday
Go-goroutine 的那些事
Battery modeling, analysis and optimization (Matlab code implementation)
LeetCode56:合并区间 C语言解法,注解详细 一看就懂!
pycharm在创建py文件时如何自动注释
【八大排序③】快速排序(动图演绎Hoare法、挖坑法、前后指针法)