在網頁設計中，如何將文本放在圖片上是非常常見的需求。CSS提供了幾種方法來實現這個效果。

/* 方法一：使用position屬性和z-index屬性 */
.image-container {
position: relative;
width: 400px;
height: 300px;
}
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: #fff;
}
.image {
display: block;
width: 100%;
height: 100%;
}
<div class="image-container">
<img class="image" src="image.png">
<div class="text-overlay">
<p>文本內容</p>
</div>
</div>
/* 方法二：使用background-image屬性 */
.image-container {
width: 400px;
height: 300px;
background-image: url(image.png);
background-position: center center;
}
.text-overlay {
color: #fff;
}
<div class="image-container">
<p class="text-overlay">文本內容</p>
</div>
/* 方法三：使用clip-path屬性 */
.image-container {
width: 400px;
height: 300px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
.text-overlay {
color: #fff;
}
.image {
display: block;
width: 100%;
height: 100%;
}
<div class="image-container">
<img class="image" src="image.png">
<p class="text-overlay">文本內容</p>
</div>

以上三種方法都可以將文本放在圖片上，并且可以根據實際需求進行調整。可以根據具體的情況選擇合適的方法實現效果。