在網(wǎng)頁制作中，我們經(jīng)常需要在圖片上疊加一些文字以增加圖片表現(xiàn)力或者向用戶傳達(dá)信息，那么在HTML5中，我們?nèi)绾卧O(shè)置圖片加文字呢？

<div class="img-wrap">
<img src="mypic.jpg" alt="我的照片">
<span class="text">我喜歡旅游</span>
</div>

以上是一個(gè)基礎(chǔ)的例子，我們先將圖片和文字都放在一個(gè)div容器中，然后對(duì)容器應(yīng)用CSS（層疊樣式表）來定制樣式。以下是示例CSS：

.img-wrap {
position: relative;  /*設(shè)置容器為定位上下文*/
}
.text {
position: absolute;  /*絕對(duì)定位*/
bottom: 0;  /*距離底部為0*/
left: 0;  /*距離左側(cè)為0*/
right: 0;  /*距離右側(cè)為0*/
background: rgba(0,0,0,0.5);  /*背景色半透明黑*/
color: #fff;  /*字體顏色為白色*/
font-size: 16px;  /*字體大小為16像素*/
text-align: center;  /*文字居中*/
padding: 10px;  /*內(nèi)邊距*/
}

上述代碼中，我們給容器設(shè)置了定位上下文，使得絕對(duì)定位的文字可以相對(duì)于容器進(jìn)行定位。并且，我們設(shè)置了文字的位置在容器底部左右相鄰，并且半透明的黑色背景顯得更為美觀。此外，我們還設(shè)置了文字的樣式，包括顏色、字體大小、居中，以及內(nèi)邊距等等。

以上是一個(gè)簡單的HTML5設(shè)置圖片加文字的例子，希望對(duì)您的網(wǎng)頁制作有所幫助。不過請(qǐng)注意，為了網(wǎng)頁的響應(yīng)式設(shè)計(jì)，在不同的設(shè)備上可能需要不同的樣式設(shè)置。