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

【问题标题】：How to have dynamic overlays over images in angular 2?如何在角度 2 的图像上进行动态叠加？
【发布时间】：2018-07-24 04:51:24
【问题描述】：

如何在 angular 2 中制作像上面那样的图像，取自 facebook 市场。我需要的是左下角的黑色。

【问题讨论】：

Position absolute but relative to parent的可能重复

标签： javascript css angular

【解决方案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>

【讨论】：

已经有一系列关于positioning div inside another div 的答案（超过 9000 个）。应该标记为重复。