因为我基本上想使用个人资料图片作为列表元素符号(我已经通过使用
list-style-image :url("myURL");
在我的 css 文件中)。
不过,我想在图中画一个圆圈,代表一个用户的在线状态。
有没有聪明的方法来做到这一点?或者我是否必须采取长期行动并删除列表元素符号,然后添加一个我可以在其上绘画的 div 并将其移动到列表元素符号通常所在的位置?
提前致谢
最佳答案
伪:
<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>
关于javascript - 有没有一种巧妙的方法可以将图片用作列表元素符号,然后在上面画一些东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29608546/