圖片配上文字已經(jīng)成為現(xiàn)代網(wǎng)頁設(shè)計(jì)的常見方式。

要想使得文字顯示在圖片上面，我們需要使用 CSS 屬性來實(shí)現(xiàn)。通過設(shè)置圖片的定位為相對定位（relative）或絕對定位（absolute），以及文字元素的定位為絕對定位（absolute），我們可以使得文字元素相對于圖片定位出現(xiàn)在圖片之上。

img {
position: relative;
}
p {
position: absolute;
top: 10px;
left: 10px;
}

在上面的例子中，我們將圖片的定位屬性設(shè)置為相對定位（relative），讓其成為“定位參照物”。然后，我們將文字元素的定位屬性設(shè)置為絕對定位（absolute），并使用 top 和 left 屬性將其移動到距離圖片左上角 10 像素的位置。這樣，我們就可以實(shí)現(xiàn)文字顯示在圖片之上的效果。

當(dāng)然，我們也可以使用 z-index 屬性來控制元素的層疊順序，以確保文字元素始終出現(xiàn)在圖片之上。具體方法是將文字元素的 z-index 屬性設(shè)置為比圖片元素的 z-index 屬性高 1 即可。

img {
position: relative;
z-index: 1;
}
p {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}

當(dāng)然，有些情況下我們還需要考慮圖片的響應(yīng)式縮放。如果我們使用圖片作為背景，可以通過 CSS 的 background-size 屬性來控制背景圖片的大小。如果我們使用<img>標(biāo)簽來嵌入圖片，可以使用 max-width 屬性使其自適應(yīng)布局。

在實(shí)際項(xiàng)目中，我們可以根據(jù)需求使用不同的方法來實(shí)現(xiàn)文字顯示在圖片之上的效果。但是需要注意的是，如果圖片是通過 CSS 背景引入的，則文字元素不能使用背景樣式，否則文字將會被隱藏。