获取背景图像像素的计算位置

我已经看到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

获取背景图像像素的计算位置

回答

相关问题