確定使用CSS移動的背景圖像的左上座標

我試圖找到背景圖像的頂部和左側座標，它們通過應用某些CSS規則已從視口中移出。很難用言語來解釋，這裏是一個視覺的例子：確定使用CSS移動的背景圖像的左上座標

Background-image shifted to the left

黑匣子：視口
箱紅色：<div>用background-image
藍箱：<div>包含<a>

當我做與background-image的，我得到0px 0px。這很有意義，因爲容器位於視口內，並且從頂部和左側開始。

然而，是<div>的背景圖像已經被轉移到了左側（它可能已被轉移到頂部也是如此），因此座標應該從<div>情況有所不同。所以我的問題是：

我將如何閱讀（我不想改變）如何找到在這種情況下的任何頁面的綠點座標？我的意思是，瀏覽器必須知道它需要多少個像素來削減background-image，對吧？

我目前使用Javascript訪問Web/Dom API。我願意使用任何東西（無證可能？）來實現這一點。

來源

2013-11-21 Nobita

您是否嘗試過計算圖像的寬度，從窗口寬度中減去，然後除以2？如果它始終居中，那麼應該獲得每邊窗戶外的金額。如果圖像是右對齊的，只需減去兩個寬度。 – brouxhaha

@brouxhaha感謝您的評論。這只是一個例子，我試圖找到一個通用的解決方案。如果背景圖像不是中心，但是其他東西呢？ – Nobita

這是一個很好的問題。我看到的另一個問題是，如何訪問背景圖像，或者如果它不是背景圖像，而是內嵌圖像？如果他們周圍的div縮小，會導致圖像縮小？如果圖像打破了包含div的邊界會怎麼樣？如果大於包含div，但溢出：隱藏設置？有很多變數需要考慮。 – brouxhaha

下面是針對您的問題的解決方案，適用於現代瀏覽器。

var testNode = document.getElementById('test'); 
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');

正如您在接下來的頁面中看到的，並非所有的Web瀏覽器都支持此方法。

http://caniuse.com/getcomputedstyle

沒有答案的「Cross-browser (IE8-) getComputedStyle with Javascript?」問題，但我不知道其他的解決這個問題。

如果沒有getComputedStyle（），沒有合理的方式獲取元素的當前樣式設置，因爲這需要檢查所有包含的CSS。這是可能的，但涉及CPU密集型代碼。如果你要朝這個方向發展，你可以在現有div內創建一個臨時div，並且可以設置相對位置，可能會將top和left或margin設置爲背景位置的值，然後計算div的clientTop和clientLeft結束的位置在某些情況下可能會起作用。

來源

2013-12-07 13:14:54

-1

有一個CSS屬性爲：background-position。試試以下代碼來檢索所要求的信息：

$('#divId').css('backgroundPosition');

來源

2013-11-21 18:19:50 falsarella

如果您認爲具有該屬性，我可以解決我的問題，請定義如何找到一個通用解決方案。 – Nobita

確定使用CSS移動的背景圖像的左上座標

回答

相關問題