html - 沿着山脉放置圆圈/气泡

Question

我目前面临的挑战之一是使用 CSS 沿着图像中的山脉定位不同数量的圆圈/气泡。让我们假设图像看起来像这样(没有红色气泡):

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

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

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

Answer 1

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

.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;
    }
}

<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>

JSFiddle version

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