css - 根据该图像坐标将图像放在另一个图像上

Question

我需要创建一个 Angular 8 组件，它包含用作 map 的大图像，并根据该图像坐标在前者上动态放置较小的图像。例如:我在背景中有一个房间图像。从服务器我知道我的椅子图像是 20x20 像素，它应该以相对于房间图像的 120x 300y 为中心放置。

我怎样才能做到这一点？我尝试使用一些 css 技巧，比如将较大的包裹在相对定位的 div 中，而较小的则使用 NgStyle 设置绝对 div，但它只是将其放置在 0.0

由于元素需求，我不能使用 AngularMaterial。

Answer 1

如果我正确理解您的问题，只需将您的椅子图像相对于背景图像放置就足够了。我会将您的背景包装在一个容器中，该容器将成为任何其他绝对内部元素的相对容器。

类似的东西:

.room-container {
  position: relative;
}

.chair {
  position: absolute;
  
  top: 400px;
  left: 400px;
}

<div class="room-container">
  <!-- BG Image-->
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Hotel-suite-living-room.jpg" alt="">
    
  <!-- Chair image -->
  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG" alt="" class="chair">
</div>