獲取特定點在背景圖像中的位置

我正在構建一個具有一些背景圖像的使用background-size: cover的響應網站..好吧...用背景圖像覆蓋div。我需要總是得到圖像特定部分的位置，而不是它的div。獲取特定點在背景圖像中的位置

僅用於演示目的，可以考慮以下情形：

我用這個形象來覆蓋一個div enter image description here

現在我想總是拿到iPhone上面的斑點，儘管在改變位置相對圖像到其div引起background-size: cover：

enter image description here

我想用這個來覆蓋div的作爲在圖像上的標籤或按鈕。顯而易見的問題是，我的覆蓋是相對於父div的位置。但我需要它們相對於圖像中的iPhone。

這裏JSFiddle：http://jsfiddle.net/3NuDy/調整框架的大小！紅色標籤應該始終位於iPhone正上方。

這可能與HTML5，CSS3 和Javascript（jQuery）？

編輯：增加了另一張圖片來說明iPhone（或紅點）相對於div的不同位置。

Edit2：添加JSFiddle來說明我的問題。調整框架的大小！紅色標籤應該總是直接在iPhone上面http://jsfiddle.net/3NuDy/

來源

2013-06-25 ProblemsOfSumit

因此，找出圖像中的點，然後減去任何圖像位置偏移量 – musefan

我已經做了類似的事情，也使用'background-size：cover;'。它的三個數學簡單的規則。您必須以特定比例讀取疊加層的'.offset（）;'並在調整瀏覽器窗口大小時使用該因子重新計算新的偏移量。 – supersize

但我如何獲得背景圖像和它的div邊緣之間的偏移量？ – ProblemsOfSumit

我還沒有嘗試過，但我認爲你應該在百分比設置中放置覆蓋div。如果您的背景圖像的寬度延伸到整個div的寬度，則相當於100％。因此，讓您的覆蓋div定位，比如說，margin-left: 50%將始終將它放在容器div的相同位置。

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

來源

2013-06-25 10:12:13 Robert

，但這與我所需要的相反。覆蓋div必須相對於圖像中的紅點（或iPhone，或圖像中的任何其他點），而不是容器格。最後一幅圖像中的紅點與第二幅圖像（相對於div）的百分比位置不同 - 在此示例中：80％（第二幅圖像）和100％（第三幅圖像）。 – ProblemsOfSumit

添加到您的更新中：您只是將圖像裁剪爲具有相同寬高比的較小尺寸。 'background-size：cover'會導致圖像在我提供的圖像中看到不同的寬高比。 – ProblemsOfSumit

錯誤，您的示例圖片沒有不同的高寬比。上面的示例圖像是裁剪後的圖像，而不是「覆蓋」圖像，可以延伸到div的形狀。 – Robert

如果我正確理解你的問題，以下可以工作：

$(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來做。

可能會有所幫助。 FIDDLE

編輯：它始終位於同一位置，但也必須縮小點，因爲它不會更改其大小，因此它看起來稍微有點錯誤。但它不，因爲你可以看到如果你正在看#dot的左邊界。

來源

2013-06-25 12:21:37 supersize

獲取特定點在背景圖像中的位置

回答

相關問題