网页设计中，图片展示是非常重要的。但是我们有时需要在图片上展示一些文字，如何实现呢？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; /* 字体加粗 */
}

通过以上代码，我们可以实现在图片上展示可控样式的文字效果。