在網頁設計中，圖片占據了很大的比重，而在圖片上添加文字標注可以更好地讓用戶了解圖片的含義和作用。一種實現這種效果的方法是使用 CSS 圖片標注。

首先要做的是在 HTML 代碼中為圖片創建容器，并在其中插入圖片。例如：

<div class="img-container">
<img src="image.png" alt="圖片描述">
</div>

接下來，在 CSS 中設置容器的 position 屬性為 relative，使它成為定位的父元素。然后，為標注文本創建一個 span 元素，為它添加樣式并將其 position 屬性設置為 absolute，使其根據容器定位。

.img-container {
position: relative;
}
.img-container span {
position: absolute;
top: 0;
left: 0;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
}

最后，將這個 span 元素插入到容器中并設置位置。例如，如果要將標注放在圖片的左上角，可以這樣做：

<div class="img-container">
<img src="image.png" alt="圖片描述">
<span>圖片標注文本</span>
</div>
.img-container span {
top: 0;
left: 0;
}

通過這種方法，可以輕松地在圖片上添加標注文本，從而提高網頁的可讀性和用戶體驗。