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

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

 .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; } 

 <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> 

希望这可以帮助