在绘图图（SVG）上叠加图像

Question

我在div中有一个图表，由plotly生成（这是一个SVG元素）。我想覆盖一个图像，但我无法弄清楚如何做到这一点。我已经尝试将div上的background-image CSS属性设置为图像，但它没有显示出来。有谁知道我怎么能这样做？

Answer 1

简单叠加......

<强> JSFiddle

<强>代码：

<div class="wrapper">
  <div class="ploty">
    <img src="http://placehold.it/500x300" />  <!-- This would instead be your chart -->
  </div>
  <img class="overlay" src="http://lorempixel.com/400/200/food/1/" />
</div>


.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
}

这会将img.overlay定位在div.wrapper的左上角。您可以通过更改top和left属性的值将其放置在任意位置：

.overlay {
  position: absolute;
  top: 20px;
  left: 50px;
}