在網(wǎng)頁開發(fā)中，我們經(jīng)常需要在圖片上添加一些文本說明，以便用戶更好地理解圖片的意義和用途。這時(shí)候，我們可以使用CSS來實(shí)現(xiàn)在圖片前面添加文字的效果。

/* 設(shè)置圖片容器樣式 */
.image-container {
display: flex;
align-items: center;
}
/* 設(shè)置圖片樣式 */
.image-container img {
margin-right: 10px; /* 設(shè)置圖片和文字之間的間距 */
}
/* 設(shè)置文字樣式 */
.image-container p {
font-size: 16px;
font-weight: bold;
}

以上代碼中，我們使用了flex布局讓圖片和文字在同一行，并通過設(shè)置圖片的margin-right屬性來控制圖片和文字的間距，同時(shí)也設(shè)置了文字的字體大小和加粗程度。

接下來，我們將HTML代碼和CSS樣式組合起來，實(shí)現(xiàn)圖片前面添加文字的效果：

<div class="image-container">
<img src="image.jpg" alt="圖片">
<p>這是一張圖片</p>
</div>

以上HTML代碼中，我們將圖片和文字放在一個(gè)div容器中，并為這個(gè)容器添加了image-container類名，隨后在img和p標(biāo)簽中分別添加了圖片和文字，效果如下：

這是一張圖片

通過使用CSS，我們可以很方便地實(shí)現(xiàn)在圖片前面添加文字的效果，提高網(wǎng)頁的可讀性和用戶體驗(yàn)。