CSS可以很容易地將文字附在圖片上。這種效果通常用于制作卡片或者banner圖等。

首先，要確保圖片和文字碰撞在一起。這就需要設定圖片和文字的外邊距（margin）。

img {
margin: 0;
}
p {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
padding: 10px;
color: white;
}

這樣，圖片和文字就會接觸在一起。但是，文字會在圖片的上方出現，看起來不夠美觀。因此，必須使用絕對定位（absolute positioning）將文字粘在圖片下部。

接下來，可以將文字放入一個帶有背景顏色和padding的容器中，這樣文字就不會看起來太過單調了。

最終的代碼如下：

<div class="card">
<img src="example.jpg" alt="example">
<p>這是一段文字，用來描述這張照片。</p>
</div>
.card {
position: relative;
display: inline-block;
}
img {
margin: 0;
}
p {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
padding: 10px;
color: white;
}

這樣，就可以輕松地將文字附在圖片上了。