今天我們要來學習在網頁中如何讓文字置于圖片下方的效果，這個效果在許多站點中都非常常見，非常實用。那么具體怎么實現呢？

<div class="container">
<img src="your-image-url.jpg" alt="your-image">
<p>your-text-here</p>
</div>
<style>
.container {
position: relative;
}
img {
display: block;
width: 100%;
}
p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0,0,0,0.5);
color: white;
font-size: 20px;
text-align: center;
}
</style>

以上代碼中，我們利用了CSS的相對定位和絕對定位來實現圖片和文字的布局。首先將容器的position設為relative，這樣圖片和文字的定位可以基于容器來計算。對于圖片，我們設置其display屬性為block，并鋪滿整個容器。對于文字，我們則將其position設為absolute，并設定bottom為0，表示文本在容器底部。同時，我們還設置了一些樣式，如padding、background-color和font-size等，以美化文本。

另外需要注意的是，容器中的img和p元素是平級的，這樣在未設置絕對定位時，它們會按照HTML代碼在頁面中自然排列。同時，代碼中的布局是相對靈活的，你可以根據實際需求調整、美化樣式。希望大家在學習CSS布局時能夠掌握這個實用的技巧！