在網頁開發中，有時需要在圖片上添加一些文字或者其他內容，這時候就需要使用CSS技術來實現。CSS可以通過偽元素和position屬性來實現在圖片上加內容。

img{
position: relative;
}
img::after{
content: "這是在圖片上添加的內容";
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,0.7);
color: #fff;
width: 100%;
text-align: center;
font-size: 20px;
}

上面的代碼中，我們先將圖片的position屬性設置為relative，這樣就可以使用相對定位的方式來添加內容了。然后使用偽元素::after來對圖片進行修飾。我們將內容添加到偽元素中的content屬性中，然后將偽元素的position屬性設置為absolute，這樣就可以脫離文檔流并相對圖片進行定位了。在這里我們設置了文字在圖片底部，背景顏色為半透明的黑色，文字顏色為白色，寬度為100%（與圖片等寬），居中顯示，字體大小為20px。在實際應用中，可以根據需求進行樣式的調整。

除了使用::after偽元素，我們還可以使用::before偽元素來添加內容，方法與上面類似，只需要將::after改為::before即可。

在實際應用中，我們可以結合JS來動態添加內容，實現更為豐富的交互效果。同時，我們也可以使用CSS的transform屬性對內容進行旋轉、縮放等操作，使其更具視覺吸引力。