一：把ul或li 中的行高删掉。
二：修改图片，把那红色的画下一点，可做成gif透明图（如原本图为：16*16，可画成：16*21，红色部分在最底部。）。
三：去掉list-style-image属性，改为在li 中用 background 属性
如：
ul{list-style:none}
li{padding-left:18pxbackground:url(pot.gif) no-repeat left 5px}
以上……
代码如下：.avatar {
position: relative
width: 100px
height: 100px
}
.avatar >img {
width: 100px
height: 100px
border-radius: 50%
}
.icon {
position: absolute
right: 0/*根据需要调整数值*/
bottom: 0/*根据需要调整数值*/
width: 50px
height: 50px
font-size: 14px
color: #fff
background-color: yellow
border-radius: 50%
}
<div class="avatar">
<img src="头像图片" >
<div class="icon">
<img src="图片" >
或者小图标
</div>
</div>
