image中可以调整mode属性来调整图片要显示的上、中、下、左、右等各个区域,但是在使用过程中并不能精确指定,比如要实现如下效果:
怎么办呢?就是在一整张表情中根据点击显示点击区域的表情。
体验:
上代码,一看就会:
.emoji {
background: url('https://6e598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126') no-repeat scroll 0 0 transparent;
width: 29px;
height: 29px;
vertical-align: middle;
}
<image class="emoji" style="background-position:-29px -29px"></image>
要点:
1、将图片资源设置成背景
2、控制image宽高及背景位置