在網頁設計中，常常需要將文本或者其他元素放在圖片的上方，這時候我們可以使用CSS來實現。下面是一些實現的方法。

/*HTML代碼*/
<div class="container">
<img src="image.jpg">
<div class="text">這是圖片上的文字</div>
</div>
/*CSS代碼*/
.container {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
font-size: 20px;
}

在這段代碼中，我們首先將img元素和文本元素都添加到一個包含元素container中。我們給container元素添加了一個相對定位，這樣我們才能讓后面的absolute定位正常工作。

我們給文本元素text添加了一個絕對定位，并使用了top和left屬性將其放置到圖片的正中央。由于相對于包含元素進行定位，我們使用了transform屬性中的translate函數來居中元素。

最后，我們使用了一些CSS樣式來美化文本，例如背景顏色和字體大小等等。

除此之外，我們還可以使用background-image屬性直接將圖片作為元素的背景圖像，并使用background-size屬性來調整它的大小。這種方法可以省去HTML中的img元素，但是并不便于SEO和可訪問性。