基于该图像坐标将图像放置在另一图像上

2022-07-05 00:00:00 image overlap css components angular8

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

我如何才能做到这一点?我试着使用一些css技巧,比如将较大的div包装在相对定位的div中,较小的将绝对div设置为NgStyle,但它只将其设置为0.0

对于项目要求,我不能使用AngularMaterial。


解决方案

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

类似的内容:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.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>

相关文章