CSS3是CSS的第三個版本，它增加了很多新的功能，使得我們可以更好地控制和美化網頁。其中之一就是在圖片上方添加文字的功能。

/* 使用position屬性和:before偽元素來添加文字 */
img {
position: relative;
display: block;
margin-bottom: 20px;
}
img:before {
content: "這是一張圖片";
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 20px;
text-align: center;
padding: 10px;
}
/* 使用clip-path屬性和background-clip屬性來添加文字 */
img {
display: inline-block;
margin-right: 20px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
background-clip: padding-box;
position: relative;
}
img:before {
content: "這是一張不錯的圖片";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 18px;
text-align: center;
padding: 10px;
}

以上是兩種常用的方法，第一種方法使用了position屬性和:before偽元素，通過設置絕對定位和背景顏色來實現在圖片上方添加文字；第二種方法則是使用了clip-path屬性和background-clip屬性，通過設置裁剪路徑和背景區域來實現同樣的效果。

上面的代碼中，我們可以根據需要調整文字的顏色、字體大小、位置等樣式。通過這種簡單的方法，可以讓網頁看起來更加美觀和有趣。