javascript - 有没有一种巧妙的方法可以将图片用作列表元素符号，然后在上面画一些东西？

Question

因为我基本上想使用个人资料图片作为列表元素符号(我已经通过使用

list-style-image :url("myURL");

在我的 css 文件中)。

不过，我想在图中画一个圆圈，代表一个用户的在线状态。

有没有聪明的方法来做到这一点？或者我是否必须采取长期行动并删除列表元素符号，然后添加一个我可以在其上绘画的 div 并将其移动到列表元素符号通常所在的位置？

提前致谢

Answer 1

伪:

<ul class="users">
{foreach user in users}
    <li style="background-image:url({user.image})" class="{user.online}">{user.name}</li>
{/foreach}
</ul>

CSS:

ul.users li{
  background-repeat: no-repeat;
  background-size:   contain;
  padding-left:      30px;
  list-style:        none;
  position:          relative;
  margin:            5px 0;
}


ul.users li.online:before{
  border-radius: 50%;
  background:    #2d2;
  position:      absolute;
  content:       "";
  height:        10px;
  width:         10px;
  left:          -5px;
  top:           -5px;
}

body{
  font-family: Helvetica, arial, sans-serif;
  color:#556;
  margin:0;
}


ul.users li{
  background-repeat: no-repeat;
  background-size:   contain;
  padding-left:      30px;
  list-style:        none;
  position:          relative;
  margin:            5px 0;
}


ul.users li.online:before{
  border-radius: 50%;
  background:    #2d2;
  position:      absolute;
  content:       "";
  height:        10px;
  width:         10px;
  left:          -5px;
  top:           -5px;
}

<ul class="users">
  <li style="background-image:url(http://i.stack.imgur.com/KubCT.jpg?s=24)" class="online">Stefan Schranz</li>
  <li style="background-image:url(http://i.stack.imgur.com/1ZIkv.jpg?s=24)" class="">Roko C. Buljan</li>
</ul>