如何在角度2的图像上进行动态叠加？

Question

如何在角度2中获得与上图相同的图像，该图像取自facebook市场。我需要的是左下角的黑色。

Answer 1

在将position设置为relative的图像周围创建包装div，然后将叠加层创建为子div，并将position设置为absolute。

它将相对于容器定位

这里是一个例子：

.img-container {
  position: relative;
}

img {
    width: 500px;
}

.overlay {
    display: inline-block;
    color: white;
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 10%;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

<div class="img-container">
  <img src="http://greenwoodhypno.co.uk/wp-content/uploads/2014/09/test-image.png" />

  <div class="overlay">
     $75
  </div>
</div>