在网页设计中，我们经常需要在图片的最上方显示一些文字，这样可以更好地展示图片的内容和意义。在实现这一功能的过程中，CSS样式就起到了非常重要的作用。

要在图片上方显示文字，我们可以通过在图片上覆盖一个半透明的层，然后在层上添加文字来实现。这个半透明的层可以通过CSS中的伪元素before或after来创建。我们可以设置伪元素的宽高相等、position为绝对定位、top和left为0、z-index为-1，这样伪元素就会覆盖在原来的图片上方。接着，我们可以在伪元素里面添加文字，并通过CSS样式来设置文字的样式、位置、对齐等。

img {
position: relative;
}
img:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.5);
}
img:before {
content: "这里是文字";
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代码可以让我们在图片上方添加一个半透明的黑色层，并在层上方居中显示一个白色的文字。通过设置图片的position为relative，我们使得伪元素的定位以图片为参考。设置伪元素的z-index为-1，可以让它在原来的图片下面。设置文字的position为absolute，并通过translate属性将文字向上移动50%和左移50%，可以使其在层的中央上方显示。

通过使用CSS样式，我们可以在图片上方显示出符合我们需求和风格的文字，使得图片更加生动和有意义。