用子弹创建图像

Question

我的图像是http://prntscr.com/3etg6t。我希望在我的申请中这样。但是圈子（有颜色）我希望能够改变它们。所以，价值观和颜色。但我现在已经知道如何能够解决这个问题。这可能与一些CSS有关，还是应该用PHP生成它？

欢迎提示！

Answer 1

您可以使用 imagemapster 。

以下是此插件的演示项目页面的链接 - http://www.outsharked.com/imagemapster/default.aspx?demos.html

这是我最近使用过的一个项目 - http://male.fitnessdays.bg/

这应该是yoyu正在寻找的确切结果。您只需要创建多边形并定义想要实现的颜色和效果。

Answer 2

只需在容器上使用position: relative，在子弹上使用position: absolute。

<强> CSS ：

#body {
    background: url('http://i.imgur.com/5cXq5VT.jpg') no-repeat;
    position: relative;
    height: 500px;
}

.bullet {
    position: absolute;
    background-color: red;
    padding: 2px;
}

<强> HTML ：

<div id="body">
    <div class="bullet" style="top: 50px; left: 310px;">:)</div>
    <div class="bullet" style="top: 135px; left: 290px;">no</div>
    <div class="bullet" style="top: 135px; left: 325px;">no</div>
    <div class="bullet" style="top: 240px; left: 300px;">nope</div>
</div>

<强>结果：

JSFiddle