CSS是前端開發的重要技術之一，它可以幫助我們實現各種各樣的效果。其中，利用CSS給圖片加標簽是一種非常有用的技巧。在本文中，我們將分享如何使用純CSS實現給圖片加標簽的方法。

/* HTML代碼 */
<div class="image-container">
<img src="image.jpg">
<div class="label">這是一張美麗的圖片</div>
</div>
/* CSS代碼 */
.image-container {
position: relative; /* 讓圖片容器脫離文檔流 */
width: 300px;
}
.image-container .label {
position: absolute; /* 讓標簽相對于圖片容器定位 */
top: 10px;
left: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-weight: bold;
}
.image-container img {
width: 100%;
height: auto;
}

首先，我們在HTML代碼中包裹圖片和標簽的容器，給容器加上一個類名image-container。然后，在容器內部分別設置<img>和<div>元素，其中<div>元素是標簽的容器，我們給它添加一個類名label。在CSS中，我們使用position:absolute來讓標簽容器相對于圖片容器進行定位，然后設置top和left屬性來控制標簽容器的位置。此外，我們給標簽容器添加了一些其他樣式，例如背景顏色、字體顏色和粗細等。

最后，我們要讓圖片填充整個容器，可以使用width:100%和height:auto來實現。這樣，當圖片容器的大小改變時，圖片也會自動縮放以保持比例。

總體來說，給圖片加標簽是一種很實用的技巧，可以幫助我們更好地呈現內容。而使用純CSS來實現這個效果，可以讓我們避免使用JavaScript等其他技術，提高代碼的可維護性和可讀性。