如何用图标覆盖图像

【问题标题】：How to cover image with an icon如何用图标覆盖图像
【发布时间】：2015-07-09 10:28:23
【问题描述】：

这是https://jsbin.com/rekaxa/edit?html,css,output 的示例。我想把那个红色圆圈（一个图标）放在图像上，但要保持 html 简单明了。实现它的最佳方式是什么（可能完全不同）？

【问题讨论】：

【解决方案1】：

你还没有说你想要图标在哪里，所以我选择了 div 的死点。

div {
  background-color: green;
  width: 280px;
  height: 180px;
  position: relative;
}
img {
  margin: 0 auto;
  display: block;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; /* adjust as requiured */
  left: 50%; /* adjust as required */
  margin-top: -15px;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  background: red;
  display: block;
  border-radius: 15px;
}

<div class="icon">
  <img src="http://dummyimage.com/200x150/000/fff" />
</div>

【讨论】：