沿着一连串的山脉定位圆圈/气泡

Question

我目前面临的一个挑战是使用css在图像中沿着一连串山脉定位不同数量的圆/气泡。让我们假设图像看起来像这样（没有红色气泡）：

图像始终必须使用设备的整个宽度（100％宽度）。设备的分辨率差异很大（手机，平板电脑，台式电脑）。

有没有人知道如何在css中指定气泡的位置？

或者您是否知道一种工具可以对山脉的点进行回归，以便使用函数来计算点的绝对位置？

Answer 1

我可能会走这条路......

＆＃13;

＆＃13;

.wrap {
    position: relative;
}
.wrap img {
     width: 100%;
}

.item {
    width: 30px;
    height: 30px;
    background: green;
    border-radius: 50%;
    position: absolute;
    margin-left: -15px;
    margin-top: -15px;
    transition: all .2s ease;
}

.item:hover {
    transform: scale(1.3);
}

.item.i1 {
    left: 13%;
    top: 40%;
}

.item.i2 {
    left: 33%;
    top: 14%;
}

.item.i3 {
    left: 42%;
    top: 24%;
}

.item.i4 {
    left: 56%;
    top: 20%;
}

.item.i5 {
    left: 68%;
    top: 13%;
}

.item.i6 {
    left: 88%;
    top: 17%;
}

@media (max-width: 500px) {
    .item {
        width: 15px;
        height: 15px;
        margin-left: -7px;
        margin-top: -7px;
    }
}

＆＃13;

<div class="wrap">
    <img src="http://i.stack.imgur.com/EiRM2.png">
        
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
        <div class="item i4"></div>
        <div class="item i5"></div>
        <div class="item i6"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle version

注意媒体查询以控制点大小/位置。这可以防止重叠和移出位置。