CSS如何將文字放在圖片 在Web設計中，有時候需要將一段文字放在圖片上，讓網站更美觀。在這種情況下，CSS就能派上用場。本文將介紹如何使用CSS將文字放在圖片上。 使用p標簽將文字放在圖片中 要將文字放在圖片中，我們可以使用p標簽。我們先創建一個簡單的HTML示例：

<div class="container">
<img src="example.jpg" alt="example image" />
<p>這是一段文字，將會被放在圖片中。</p>
</div>

上面的代碼創建了一個包含圖片和文字的div容器。現在讓我們添加一些CSS，使得文字覆蓋在圖片上：

.container {
position: relative;
width: 300px;
height: 200px;
}
.container img {
width: 100%;
height: 100%;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
text-align: center;
}

上述代碼中，我們使用“position：relative”將父元素容器設為相對定位，并設置寬度和高度。接下來，我們使用“position：absolute”將p元素設置為絕對定位，使它可以被放置在圖片之上。我們還使用了“left：50％”和“top：50％”將p標簽放置在圖片的中心。然后使用“transform：translate（-50％，-50％）”將其居中。最后，我們設置了字體大小、顏色和對齊方式，以使文字更好地融入圖片。 總結 在本文中，我們討論了如何使用CSS將文字放在圖片上。我們使用p標簽將文字添加到圖片中，然后使用CSS將其定位。這種技術可以有效地提升網站的視覺效果和用戶體驗。