在網(wǎng)頁設計中，我們經(jīng)常需要在圖片上放置一些文字，來描述圖片的內(nèi)容或者起到美化的效果。CSS在這方面給予了我們很大的便利。

//html
<div class="img-container">
<img src="example.jpg">
<p class="img-caption">這是一張美麗的風景照片</p>
</div>
//CSS
.img-container {
position: relative;
display: inline-block;
}
.img-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
color: white;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.5);
}

上面的代碼展示了一個典型的圖片+字的例子。首先，我們使用一個div包裹了圖片和文字，給這個div添加了position: relative; display: inline-block;的樣式，讓他們能夠在同一行顯示。

然后，我們使用position: absolute;將文字定位在圖片的底部，使用bottom: 0; left: 0;把文字放到左下角，使用width: 100%;padding: 10px;設置文字寬度和內(nèi)邊距。最后，我們使用color: white;font-size: 16px;background-color: rgba(0, 0, 0, 0.5);來設置文字的顏色、字體大小和背景色，美化整個效果。

需要注意的是，如果圖片的大小發(fā)生變化，文字位置也會發(fā)生變化。所以在設計時需要考慮圖片和文字的比例關系，以達到最好的視覺效果。