确定使用 CSS 移动的背景图像的左上角坐标答案

【问题标题】：Determining the top left coordinates of a background image that is shifted with CSS确定使用 CSS 移动的背景图像的左上角坐标
【发布时间】：2023-03-24 21:30:01
【问题描述】：

我正在尝试通过应用一些 CSS 规则找到背景图像的 顶部和左侧坐标，该坐标已从视口移出。难以用语言解释，这里是一个直观的例子：

黑框：视口
红框：<div> 带有background-image
蓝框：@987654324 @ 包含 <a>

当我使用background-image 执行<div> 中的getBoundingClientRect 时，我得到0px 0px。这是有道理的，因为容器位于视口内，并且从最顶部和左侧开始。

但是，<div> 的背景图像已向左移动（它也可能已移动到顶部），因此坐标应该与<div>。所以我的问题是：

我将如何阅读（我不想更改）如何在任何面临这种情况的页面中找到绿点的坐标？我的意思是，浏览器一定知道它需要多少像素来剪切background-image，对吧？

我目前正在使用 Javascript 来访问 Web/Dom API。我愿意使用任何东西（可能没有记录？）来实现这一目标。

【问题讨论】：

您是否尝试过计算图像的宽度，减去窗口的宽度，然后除以 2？如果它总是居中，那应该得到每边窗口外的数量。如果图像是右对齐的，只需减去两个宽度即可。
@brouxhaha 感谢您的评论。这只是一个例子，我试图找到一个通用的解决方案。如果背景图像不是中心，而是其他东西怎么办？
这是个好问题。我看到的另一个问题是，您如何访问背景图像，或者如果它不是背景图像而是内联图像怎么办？如果它们周围的 div 正在缩小，导致图像缩小怎么办？如果图像打破了包含 div 的边界怎么办？如果大于包含的 div，但设置了溢出：隐藏怎么办？有很多变量需要考虑。
@brouxhaha 感谢您抽出宝贵时间发表评论。您所说的所有这些可能性并不意味着浏览器实际上需要找出坐标才能呈现元素。我只是想知道如何获得这些坐标。不管怎样，如果我发现更多问题，我会在它们出现时解决它们。

标签： javascript html css dom

【解决方案1】：

这是一个适用于现代浏览器的问题解决方案。

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

从以下页面可以看出，并非所有网络浏览器都支持此方法。

http://caniuse.com/getcomputedstyle

“Cross-browser (IE8-) getComputedStyle with Javascript?”问题还没有答案，我不知道这个问题的其他解决方案。

没有 getComputedStyle() 就没有合理的方法来获取元素的当前样式设置，因为这需要遍历所有包含的 CSS。这是可能的，但涉及 CPU 密集型代码。如果您要朝那个方向发展，您将能够在现有 div 内创建一个具有相对定位的临时 div，可能将顶部和左侧或边距设置为背景位置的值，然后计算 div 的 clientTop 和 clientLeft 结束的位置up 在某些情况下可能会起作用。

【讨论】：

【解决方案2】：

有一个 css 属性：background-position。尝试使用以下代码检索要求的信息：

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

【讨论】：

如果您认为使用该属性可以解决我的问题，请定义您将如何找到通用解决方案。