画像にオーバーレイされたテキストの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>

コンテナは、最終的には可変幅のものであろう、ブートストラップCOLによって

Answer 1

を決定しますが、画像の上に円を配置したいので、あなたはposition: absolute代わりの相対を使用する必要があります。これにより、ドキュメントフローから取り除かれ、親要素内の任意の場所に配置できます。

これを機能させるには、親に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>

：

は、以下の概念実証例を参照してください。