獲取背景圖像像素的計算位置

我已經看到Stackoverflow上的這個問題的變體不回答問題。獲取背景圖像像素的計算位置

問題是背景圖像是使用％或center，left，top等放置的。但是我們實際想知道的是以像素爲單位計算的定位。我不是問在CSS，內聯風格或其他方面設置了什麼，但瀏覽器計算出的位置應該基於這些風格設置。

換句話說，如果一個div是100px寬，並且我們告訴背景圖像從左邊開始是10％。我想JavaScript返回10像素，而不是10％。

請不要JQuery或其他庫，只是純JavaScript，HTML和DOM。

我已經看了看： https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

我想是這樣的： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect ......但對於背景圖像/秒。

這些功能是迄今爲止我所尋找的解決方案。我們也嘗試過獲取節點屬性，但我們仍在嘗試。

謝謝。

來源

2015-10-21 David Campbell

寬度/ 100 *％ –

是的，我一直在玩自己使用可用的信息來計算它。但它沒有給出完美的結果。在Photoshop中拍攝和測量屏幕截圖時，返回的數字與測量的像素不完全匹配。其接近，但不確切。因此我想要瀏覽器正在計算的數字。乾杯。 –

我不知道直接查詢計算出的背景位置的方法，但是您應該能夠根據圖像及其容器的尺寸計算它。

昨天我遇到了這種確切的情況（這是我如何看待這個問題）。我想知道計算的垂直位置，以像素爲單位，對符合下列條件的背景圖像：

的 1198 X 2246

尺寸在center bottom
位於其內側的容器（<header>）這是600px高大和100%寬度
尺寸cover

我想出了下面的公式：

var headerHeight = $("header").height(), 
    headerWidth = $("header").width(), 
    bgHeight = Math.round(headerWidth/0.5333), 
    bgBottom = headerHeight - bgHeight;

對於bgHeight，我通過0.5333劃分容器的寬度，因爲這是在源圖像（1198/2246）的縱橫比，則其舍入爲最接近的整數。

所以，如果我的瀏覽器窗口，例如，1280px寬：

headerHeight = 600
headerWidth = 1280
bgHeight =（1280/0.5333）= 2400
bgBottom = 600 - 2400 = -1800

因此，背景圖像垂直位置的像素值爲-1800px。

來源

2015-12-17 05:14:56 daGUY

獲取背景圖像像素的計算位置

回答

相關問題