在網(wǎng)頁中，常常需要在圖片上加上文字來起到講解、解釋的作用，同時(shí)也能讓網(wǎng)頁內(nèi)容更加生動(dòng)。下面我們來介紹如何使用 CSS 實(shí)現(xiàn)圖片內(nèi)加文字。

.image{
position: relative;
}
.text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
padding: 10px;
}

首先，我們需要將圖片和文字的父元素設(shè)置為相對(duì)定位。

<div class="image">
<img src="example.jpg">
<div class="text">這是圖片描述文字</div>
</div>

接著，我們使用絕對(duì)定位將文字放到圖片的底部，左側(cè)，然后設(shè)置文字的寬度為 100%。我們還可以添加一個(gè)半透明的背景色和白色的文字顏色來使文字更加清晰可見。最后，我們可以設(shè)置文字的字號(hào)大小和內(nèi)邊距，以適應(yīng)不同的圖片大小和描述長(zhǎng)度。

通過以上的 CSS 樣式和 HTML 代碼，我們可以輕松地實(shí)現(xiàn)圖片內(nèi)加文字的效果，讓網(wǎng)頁內(nèi)容更加生動(dòng)、詳盡。