在圖像上覆蓋文字的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>

容器最終將可變寬度的，既然你想通過圖像來定位你的圈子由引導山坳

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>