在網頁制作中，經常會遇到給圖片添加文字的需求，這個時候我們就可以使用CSS來完成這個任務。

/* 添加文字 */
.img-text {
position: relative; /* 將包含圖片和文字的容器設置為相對定位 */
}
.img-text::before {
content: ""; /* 使用偽元素before來添加文字 */
position: absolute; /* 設置為絕對定位 */
top: 0; /* 文字的位置 */
left: 0;
width: 100%; /* 寬度設置為容器的寬度 */
height: 100%; /* 高度設置為容器的高度 */
background: rgba(0, 0, 0, 0.7); /* 設置文字背景為半透明黑色 */
color: #fff; /* 設置文字顏色為白色 */
text-align: center; /* 居中顯示文字 */
padding-top: 50px; /* 文字距離上邊框的距離 */
box-sizing: border-box; /* 邊框計算在內 */
}

以上是添加文字的基本代碼，接下來我們就可以在HTML中通過給包含圖片和文字的容器添加類名來實現添加文字的效果。

<div class="img-text">
<img src="your-image.jpg" alt="your image" />
</div>

在實際應用中，我們還可以根據需要進行一些擴展，比如添加文字的動態效果、設置文字樣式等，使得頁面更加美觀和動態。