在CSS中,可以使用position
屬性將文字顯示在圖片下方,將圖片和文字分別設(shè)置為不同的HTML元素,例如<img>
和<p>
,在CSS中設(shè)置圖片的位置為relative
,這將使圖片成為其他元素的參照物,將文字的位置設(shè)置為absolute
,這將使文字相對于***近的已定位祖先元素(即圖片)進(jìn)行定位,使用bottom
屬性將文字顯示在圖片的下方。
以下是一個示例代碼:
HTML代碼:
<img src="image.jpg" class="image"> <p class="text">這是一段文字</p>
CSS代碼:
.image { position: relative; } .text { position: absolute; bottom: 0; left: 0; }
在上面的代碼中,圖片和文字分別被設(shè)置為不同的元素,并使用CSS的position
屬性進(jìn)行定位,圖片的位置設(shè)置為relative
,文字的位置設(shè)置為absolute
,并使用bottom
屬性將文字顯示在圖片的下方,使用left
屬性將文字與圖片的左側(cè)對齊。
這只是一個簡單的示例,實(shí)際使用時可能需要根據(jù)具體需求進(jìn)行調(diào)整,為了確保文字能夠正確顯示在圖片下方,圖片的寬度和高度應(yīng)該足夠大,以便容納文字。