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

Question

我正在建立一个响应式网站，其中包含一些使用background-size: cover的背景图片......好吧......用背景图片覆盖div。我需要总是得到图像特定部分的位置，相对于图像，而不是它的div。

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

我使用此图片来覆盖div

现在我想总是把这个位置放在iPhone上方，尽管图像相对于由div引起的background-size: cover的位置发生了变化：

我想用它来覆盖div作为图像上的标签或按钮。 显而易见的问题是，我的叠加层相对于父div而定位。但我需要他们在图像中相对于iPhone。

这里有一个JSFiddle：http://jsfiddle.net/3NuDy/调整框架大小！ 红色标签应始终位于iPhone正上方。

这可能与HTML5，CSS3 和Javascript（jQuery）有关吗？

编辑：添加了另一张图片来说明iPhone（或红点）相对于div的不同位置。

Edit2：添加了JSFiddle来说明我的问题。调整框架大小！红色标签应始终位于iPhone http://jsfiddle.net/3NuDy/

的正上方

Answer 1

我还没有尝试过，但我认为你应该使用百分比设置来定位叠加div。如果背景图像的宽度延伸到整个div的宽度，则相当于100％。因此，使用margin-left: 50%定位覆盖div会始终将其置于容器div的相同位置。

更新：我构建了一个示例，看看：http://jsfiddle.net/zpYQZ/8/

Answer 2

如果我理解你的问题，可以使用以下方法：

$(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
});

它会抓住第一个调整大小，因为您的width值可能不是我的top。但正如您所看到的，红点始终与图片的宽度相同。您需要做的就是使用#dot。

可能有帮助。 FIDDLE

编辑：它总是在同一个位置，但你也必须缩小点，因为它不会改变它的大小，它看起来有点错误。但它没有，因为你可以看到你是否正在查看{{1}}的左边界。