1

我正在构建一个响应式网站，其中包含一些背景图像，这些图像用于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/

4

2 回答 2

1

如果我正确理解您的问题，以下可能有效：

$(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.

于 2013-06-25T12:21:37.323 回答
0

我还没有尝试过，但我认为你应该使用百分比设置来定位覆盖 div。如果你的背景图片的宽度延伸到整个 div 的宽度，则相当于 100%。所以定位你的覆盖 div，比方说，margin-left: 50%总是把它放在容器 div 的相同相对位置。

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

于 2013-06-25T10:12:13.567 回答