Question

我需要创建一个内部有文字的圆圈。此圆必须位于图像全宽容器内。 Html应如下所示：

<div class="class-img">
    <img src="static/img/class-home.png" class="img-responsive" alt="">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="circle">
                    <div class="caption-text"></div> 
                </div>
            </div>
        </div>
    </div>
</div>

你能告诉我如何制作这个圆圈并将其设置为容器图像的顶部中间吗？我正在使用bootstrap 3

这是我想要创建的内容的快照：

Answer 1

使用img-circle和bootstrap将图像设为圆圈

要创建一个圆圈，请使用此css

#circle {
    width: 100px;                    //Change  values
    height: 100px;                  //Change  values
    background: red;               //Change color here
    -moz-border-radius: 50px;     //Change  values
    -webkit-border-radius: 50px; //Change  values
    border-radius: 50px;        //Change  values

}

Answer 2

＆＃13;

.class-img{


}

img{height:500px;width:500px;}
.container{
    position: absolute;
    left: 200px;
    top: 150px;
  
}

.circle{
  background:red;
 
  width:150px;
  height:150px;
  border-top-left-radius:110px ;
    border-top-right-radius:110px ;
    border-bottom-right-radius:110px ;
   border-bottom-left-radius:110px ;
}
.caption-text{
  text-align:center;
  padding:50px;
}

＆＃13;

<div class="class-img">
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"  class="img-responsive" alt="">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="circle">
                    <div class="caption-text">hello</div> 
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

希望这有帮助

在图像容器内创建一个带有居中文本内容的css响应圆圈

2 个答案: