css圈与文本重叠在图像上

Question

我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中以hoiciontally和verticaly为中心。

我几乎用正方形div来解决问题，但只要我将图像放入混合图像中，圆圈就会移动到图像下方。

我的代码。

.Container {
  width: 300px;
  height: 300px;
}

.Square {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

.Square img {
  width: 100%;
  height: 100%;
}

.Circle {
  position: relative;
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;
  background-color: rgba(0, 0, 200, 0.5);
  border-radius: 50%;
  /*80px;*/
  margin-bottom: 50%;
  /*30px; */
  float: left;
  margin-right: 20px;
}

.Circle h3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
  text-align: center;
}

<div class="Container">
  <div class="Square">
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" />

    <div class="Circle">
      <h3>Words Here</h3>
    </div>
  </div>
</div>

Container最终的宽度可变，由bootstrap col

决定

Answer 1

由于您想要将圆圈放在图像上，因此您必须使用position: absolute而不是亲戚。这将把它从文档流中取出，您可以将它放在父元素中的任何位置。

为了使其成功，您还必须在父母身上声明position: relative。

请参阅下面的概念验证示例：

.Container {
  width: 300px;
  height: 300px;
}

.Square {
  height: 100%;
  width: 100%;
  background-color: yellow;
  position: relative; /* To allow children to be absolutely positioned */
}

.Square img {
  width: 100%;
  height: 100%;
}

.Circle {
  position: absolute; /* Use absolute positioning */
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;
  background-color: rgba(0, 0, 200, 0.5);
  border-radius: 50%;
  /*80px;*/
  margin-bottom: 50%;
  /*30px; */
  float: left;
  margin-right: 20px;
}

.Circle h3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
  text-align: center;
}

<div class="Container">
  <div class="Square">
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" />

    <div class="Circle">
      <h3>Words Here</h3>
    </div>
  </div>
</div>