带有文字覆盖在图像上的 css 圆圈

Question

我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。

我几乎用正方形 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 而不是 relative。这会将其从文档流中取出，您可以将其放置在父元素中的任何位置。

为了让它工作，您还必须在父级上声明 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>