Jquery 获取背景图像中特定点的位置

我正在建立一个响应性强的网站，其中包含一些背景图像，这些图像使用

背景大小：cover

来。。好。。。用背景图像覆盖a div。我需要始终获得图像特定部分的位置，相对于图像，而不是其div

仅出于演示目的，考虑以下情况：

我用这个图像来覆盖一个div

现在，我想始终看到iPhone上方的斑点，尽管图像相对于其

div

的位置因

背景尺寸：封面

而发生变化：

我想用它将

div

作为标签或按钮覆盖在图像上。 明显的问题是，我的覆盖图是相对于父div定位的。但我需要它们相对于图像中的iPhone

这里有一个JSFIDLE：调整框架的大小！ 红色标签应始终位于iPhone的正上方

HTML5、CSS3和Javascript（jQuery）是否可以实现这一点

编辑：添加另一幅图像，以说明iPhone（或红点）相对于div的不同位置

---

Edit2：添加了JSFIDLE来说明我的问题。调整框架的大小！红色标签应始终位于iPhone的正上方

我还没有尝试过，但我认为您应该使用百分比设置定位覆盖div。如果背景图像的宽度延伸到整个div的宽度，则相当于100%。因此，如果将覆盖div定位为左边距：50%，将始终将其放置在容器div的相同相对位置

---

更新：我创建了一个示例，看一看：

如果我正确理解了您的问题，以下内容可能会起作用：

$(window).resize(function() {
    var width = $(window).width();
    var offsetdot = $('#dot').offset().left;
    console.log(width); // get reference width of window - in my case 692
    console.log(offsetdot); // get reference offset left of #dot - in my case 400

    var leftfactor = 400/692; // divide offset of width for the factor where the dot is
    newleft = leftfactor*width; // use factor to calculate new pos
    $('#dot').css('left', newleft); //insert new pos to left
});

它在第一次调整大小时捕捉，因为您的

宽度

值可能不是我的值。但正如你所看到的，红点总是在图片的同一宽度上。您只需使用

top

即可

也许会有帮助

---

编辑：它总是在同一个位置上，但你也必须缩小圆点，因为它不会改变大小，所以它看起来有点移动错误。但是如果你看的是

#圆点的左边框，你会发现它不是这样的，因此，计算出图像中的点，然后减去任何图像位置偏移量。我做了类似的事情，也使用了
背景大小：cover。这只是三个数学规则。您必须阅读
.offset（）背景位置：中上
或
左下
。这不会影响图像的大小调整，然后将覆盖层放错位置吗？确实如此，但这与我需要的正好相反。覆盖div必须相对于图像中的红点（或iPhone，或图像中的任何其他点），而不是容器div。最后一张图像中的红点与第二张图像中的红点（相对于div）的百分比位置不同-在本例中：80%（第二张图像）与100%（第三张图像）。更新：只需将图像裁剪为较小的尺寸，并具有相同的纵横比<代码>背景大小：封面
导致图像具有不同的纵横比，如我提供的图像所示。错误，示例图片没有不同的纵横比。上面的示例图像是裁剪图像，而不是延伸到div形状的“覆盖”图像。如果图像需要同时裁剪和调整大小，可以调整此jquery插件以获得裁剪/调整大小因子：。然后，你就可以对图像做任何你想做的事情，而且，你知道现场发生了什么。你是对的，Frederik，我也会选择JQuery。尽管如此，当您可以使用纯css时，它总是有点迷人；）