網頁設計中，圖片展示是非常重要的。但是我們有時需要在圖片上展示一些文字，如何實現呢？css可以幫助我們實現。

首先，我們需要在html中添加一張圖片和相應的文字：

<div class="img-container">
<img src="example.jpg">
<p class="img-text">這是展示在圖片上的文字</p>
</div>

接下來，我們需要使用css來實現圖片上的文字效果：

.img-container {
position: relative; /* 讓圖片容器相對定位 */
}
.img-text {
position: absolute; /* 讓文字絕對定位 */
top: 50%; /* 讓文字向上移動50% */
left: 50%; /* 讓文字向左移動50% */
transform: translate(-50%, -50%); /* 以文字本身為中心，向上、向左移動50% */
font-size: 24px; /* 字體大小 */
color: white; /* 字體顏色 */
text-align: center; /* 字體居中對齊 */
font-weight: bold; /* 字體加粗 */
}

通過以上代碼，我們可以實現在圖片上展示可控樣式的文字效果。