在網(wǎng)頁設(shè)計(jì)中，我們常常需要將一些文字放到圖片中，做出更為生動(dòng)、精美的效果。這時(shí)候，我們可以使用 CSS 的背景圖片屬性來實(shí)現(xiàn)。下面我們來看一下具體的實(shí)現(xiàn)方法。

/* HTML 代碼 */
<div class="img-txt">
<img src="picture.jpg">
<p>這是一段放置在圖片中間的文字</p>
</div>
/* CSS 代碼 */
.img-txt {
position: relative;
}
.img-txt img {
display: block;
max-width: 100%;
}
.img-txt p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
text-align: center;
/* 背景圖片 */
background: url(background.png) no-repeat center center;
background-size: cover;
/* 文字內(nèi)邊距 */
padding: 20px;
}

首先，在 HTML 代碼中我們使用一個(gè) div 元素包含了圖片和文字。接著，在 CSS 代碼中我們給該 div 元素設(shè)定了 position: relative，這樣后面絕對(duì)定位的文字位置就以該 div 元素為基準(zhǔn)。

接下來，我們?cè)O(shè)定了圖片的屬性，讓其能夠占滿整個(gè) div 元素的大小，達(dá)到圖片背景的效果。

最后，我們?cè)O(shè)定了文字使用絕對(duì)定位，讓其能夠在 div 元素中間位置居中顯示。同時(shí)，在背景圖片的屬性中，我們?cè)O(shè)置了需要使用的圖片地址，并將其顯示在文字的后面。

此外，我們還可以在 CSS 代碼中對(duì)文字的字體、顏色、對(duì)齊方式等進(jìn)行個(gè)性化設(shè)置，如上述代碼中的 font-size、color 和 text-align 屬性。

通過上述代碼，我們便可以輕松地將文字放到圖片中，并且能夠進(jìn)行更加靈活的樣式設(shè)置，美化我們的網(wǎng)頁效果。