在網頁設計中，加入標簽可以幫助我們更好地理解圖片的內容和語義。在CSS中，我們可以使用偽元素來添加圖片上的標簽。

/*首先創建標簽的樣式*/
.tag {
background-color: #FFA07A; /*標簽背景色*/
color: white; /*標簽文字顏色*/
font-size: 12px; /*標簽字體大小*/
padding: 2px 5px; /*標簽內邊距*/
position: absolute; /*標簽定位*/
z-index: 1; /*標簽層疊順序*/
}
/*通過偽元素選擇器添加標簽*/
img::before {
content: attr(alt); /*將圖片alt屬性的值作為標簽文字*/
position: absolute; /*標簽定位*/
top: 0; /*標簽位置*/
left: 0; /*標簽位置*/
transform: translate(-50%, -50%); /*標簽居中*/
-ms-transform: translate(-50%, -50%); /*兼容IE 9*/
white-space: nowrap; /*使標簽不換行*/
}
/*添加hover效果*/
img:hover::before {
display: none; /*鼠標滑過時隱藏標簽*/
}

在以上代碼中，我們首先創建了一個名為tag的類，用于設置標簽的樣式。然后通過偽元素選擇器img::before來指定要添加標簽的元素，通過content屬性將圖片的alt屬性的值作為標簽的文字內容。最后在img:hover::before中添加了hover效果，使鼠標滑過時標簽消失。

通過以上代碼的添加，我們可以輕松為圖片添加標簽，從而提高網頁的可訪問性和用戶體驗。