在Web開發中，經常有需要在頁面上同時展示圖片和文字的情況。在這種情況下，我們可以利用CSS的疊加功能來實現這個效果。接下來，我們就來講一講CSS怎么疊加圖片文字。 首先，我們先使用HTML創建一個包含圖片和文字的基本結構。代碼如下：

<div class="container">
<img src="image.jpg" alt="圖片">
<p>這是一段文字描述這張圖片。</p>
</div>

在這個結構中，我們使用了一個div容器來包含圖片和文字。接下來，我們就來看看怎么利用CSS來疊加圖片和文字。 一、設置容器樣式 我們首先需要給容器設置樣式，讓它能夠正確地顯示出圖片和文字。下面是一個基本的容器樣式：

.container {
position: relative;
}

我們給容器設置了相對定位，這樣就可以用來定位圖片和文字的位置。 二、設置圖片樣式 接下來，我們需要設置圖片的樣式，讓它能夠正確地顯示在容器中。下面是一個基本的圖片樣式：

.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}

我們給圖片設置了絕對定位，并把它的位置設置在容器的左上角，然后通過設置寬度為100%來讓圖片填滿整個容器。高度設置為自適應，這樣可以保證圖片的比例不會被打亂。 三、設置文字樣式 最后，我們需要給文字設置樣式，讓它能夠正確地顯示在圖片上面。下面是一個基本的文字樣式：

.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
}

我們給文字設置了絕對定位，并使用transform來將文字居中顯示在容器的中央。同時，我們還設置了文字的顏色和字體大小，方便進行個性化的調整。 好了，這樣我們就成功地實現了在頁面上疊加圖片和文字的效果。以上就是CSS怎么疊加圖片文字的方法，希望對你有幫助。