用CSS移动背景图片时,确定背景图片的左上角坐标

9
我试图找到应用了一些CSS规则以将其挪出视口的背景图片的顶部和左侧坐标。难以用言语表达,这里是一个视觉示例:
黑色方框:视口 红色方框:带有背景图片的div 蓝色方框:包含a标签的div
当我对具有背景图片的div进行getBoundingClientRect时,我得到0px 0px。这是有道理的,因为容器在视口内,并且从最上面和最左开始。
然而,该div的背景图片已经向左移动(也可能向上移动),因此坐标应该与div中的坐标不同。所以我的问题是:
如何读取(我不想改变)在任何面对这种情况的页面中找到绿色点的坐标?我的意思是,浏览器必须知道需要剪切背景图片多少像素,对吧?
我目前正在使用JavaScript访问Web / Dom API。我愿意使用任何东西(也许未经记录?)来实现这一点。

你尝试过计算图像的宽度,从窗口的宽度中减去,然后除以2吗?如果它总是居中的,那么这应该得到每侧窗口外的数量。如果图像右对齐,只需减去两个宽度即可。 - brouxhaha
@brouxhaha 感谢您的评论。这只是一个例子,我正在尝试找到一个通用解决方案。如果背景图像不是居中的,而是其他什么呢? - Nobita
1
这是一个很好的问题。我看到的另一个问题是,如何访问背景图像,或者如果它不是背景图像而是内联图像怎么办?如果周围的div正在缩小,会导致图像缩小吗?如果图像超出包含div的边界怎么办?如果图像比包含div大,但设置了overflow: hidden怎么办?有很多变量需要考虑。 - brouxhaha
1
@brouxhaha 感谢您抽出时间进行评论。您所提到的所有可能性并不意味着浏览器实际上需要找出坐标才能呈现元素。我只是想知道如何获取这些坐标。无论如何,如果我发现更多问题,我会逐个解决它们。 - Nobita
2个回答

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,相对定位,可能设置top和left或margins,以背景位置的值为基础,然后计算出div的clientTop和clientLeft最终的位置,在某些情况下可能有效。


-1

有一个与此相关的 CSS 属性:background-position。尝试使用以下代码检索所需的信息:

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接