如何在生成的热图之上显示图像？

Question

我正在尝试使用 heatmap.js 创建热图，按照此 post 中的说明：How to render heatmap.js on an image?

我的所有代码都与该示例中的代码相同。只是一个简单的生成热图，在 CSS 中添加了背景图像。请查看来自 post 的屏幕截图：

但我想在热图上方显示一张图片，所以是前景图片而不是背景图片。

我尝试过使用 plotly，但不幸的是，这是为了运行在 ESP-32 上使用 SPIFFS，所以我的 space 和处理能力非常有限。即使在我使用部分包将文件大小减小到足够小之后，网页仍然无法加载。如果可能的话，我真的更喜欢使用 heatmap.js，因为它的占用空间要小得多。

为了进一步解释我正在尝试做的事情，我想将这个半透明图像放在生成的热图之上：

所以最终想要的结果是这样的，只显示前景图像透明部分内的热图：

我使用的所有代码都与前面提到的 post 相同，只是一个简单的生成热图，在 CSS 中添加了背景图像。我还在此处使用此文档来构建示例热图，https://www.patrick-wied.at/static/heatmapjs/docs.html

有什么简单的方法可以使用 HTML/CSS/JavaScript 来做到这一点吗？

Answer 1

我不知道热图，所以无法对此进行测试，但是从问题中给出的信息来看，如果背景图像的放置如图所示有效，那么应该可以放置前景图像。

我们所做的是在#heatmap 上设置一个after 伪元素的样式，给它正确的尺寸，使用z-index 将它放在热图元素上方，并给它所需的图像作为背景。然后图像应该看起来位于热图元素上方 - 我假设它的一部分被遮挡了。

您需要确保热图元素已定位，以便其后伪元素知道将自身定位在相关位置。

#heatmap {
  width: as you want
  height: as you want
  background-image: if you still want it to have one
  any other styling you want heatmap to have

  position: relative;
}

#heatmap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
  background-image: url(the image you want to be in the foreground);
  background-size: cover; /* or contain depending on what you want */
  background-repeat: no-repeat;
  background-position: center center; /*or wherever you want it */
}

}

如何在生成的热图之上显示图像？

How can I display an image on top of a generated heatmap?

html

javascript

css

png

heatmap