javascript - 获取背景图像的计算位置(以像素为单位)

Question

我在 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 ...但是对于背景图像。

就目前为止我寻找解决方案而言，这些功能。我们也尝试过获取 Node 属性，但我们仍在试验中。

谢谢。

Answer 1

我不知道有什么方法可以直接查询计算出的背景位置，但是您应该能够根据图像及其容器的尺寸来计算它。

我昨天遇到了这种情况(这就是我遇到这个问题的原因)。我想知 Prop 有以下条件的背景图像的计算垂直位置(以像素为单位):

• 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 .