在網(wǎng)頁(yè)制作中，經(jīng)常會(huì)遇到給圖片添加文字的需求，這個(gè)時(shí)候我們就可以使用CSS來(lái)完成這個(gè)任務(wù)。

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

以上是添加文字的基本代碼，接下來(lái)我們就可以在HTML中通過(guò)給包含圖片和文字的容器添加類名來(lái)實(shí)現(xiàn)添加文字的效果。

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

在實(shí)際應(yīng)用中，我們還可以根據(jù)需要進(jìn)行一些擴(kuò)展，比如添加文字的動(dòng)態(tài)效果、設(shè)置文字樣式等，使得頁(yè)面更加美觀和動(dòng)態(tài)。