图像上带有文本覆盖的 css 圆圈答案

【问题标题】：css circle with text overlayed on an image图像上带有文本覆盖的 css 圆圈
【发布时间】：2017-08-10 19:35:52
【问题描述】：

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

我几乎用方形 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 确定

【问题讨论】：

标签： css html

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

【讨论】：