在網頁設計中，有時需要在圖片上添加文字或者標注，以便更好地傳達網站的內容和主題。在這種情況下，CSS提供了一種簡單的方法來在圖像上添加文本。

img{
position:relative;
opacity:1;
}
img:hover{
opacity:0.7;
}
img:after{
content:"這里是標注文字";
font-size:16px;
color:white;
background-color:black;
padding:3px;
position:absolute;
bottom:10px;
right:10px;
}

上述代碼是一個基本的在圖片上添加標注的例子。其中，首先將圖片設置為相對位置，并設置透明度為1。然后，通過:hover選擇器在鼠標懸停時將圖片的透明度設為0.7，以突出標注文本。

接下來，通過:after偽元素，添加標注文本的內容并設置字體大小、顏色和背景顏色。最后，將文本框設置為絕對位置并通過bottom和right屬性將文本框放置在圖片的右下角。

當然，使用CSS在圖片上添加文本有很多變化和應用，比如在圖片上添加水印、圖標等等。總之，通過合理應用CSS的技巧，不僅可以增強網站的視覺效果，還可以更好地傳達網站的主題和內容。