Erstellen Sie einen CSS-responsiven Kreis mit zentriertem Textinhalt innerhalb eines Bildcontainers

Question

Ich muss einen Kreis mit Text innen, zentriert erstellen. Dieser Kreis muss sich in einem Container mit voller Bildbreite befinden. Html sollte wie folgt aussehen:

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

Können Sie mir sagen, wie man diesen Kreis machen und Stil es in der oberen Mitte des Behälters Bildes zu sein? Ich bin mit Bootstrap-3

Dies ist eine Momentaufnahme dessen, was ich erstellen möchten:

Answer 1

Verwenden img-circle mit Bootstrap zu bekommen Bild als Kreis

einen Kreis zum Erstellen diese 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>

hoffe, das hilft