最近在設計網頁時，發現了一個非常有趣的技巧：將文字寫在圖片里。這不僅可以提升網頁的美觀程度，還可以有效地減少頁面的加載時間。今天就來介紹一下如何使用 CSS 實現文字寫在圖片里。

/* HTML 代碼 */
<div class="image-container">
<img src="image.jpg" alt="圖片">
<div class="image-text">
<p>這里是文字</p>
</div>
</div>
/* CSS 代碼 */
.image-container {
position: relative;
}
.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
}

首先，我們需要在 HTML 中創建一個包含圖片和文字的 div 容器。圖片可以通過 <img> 標簽添加，文字可以通過 <p> 標簽添加。

接下來，在 CSS 中，我們需要將 .image-container 的 position 設為 relative，這樣可以讓 .image-text 的 position 設為 absolute，而不是相對于整個頁面的位置。同時，我們還需要將 .image-text 相對于容器居中，這可以通過設置 top、left 和 transform 屬性實現。

最后，在 .image-text 中，我們需要添加背景和 padding 屬性，使文字的顯示更加明顯。

至此，我們就成功地將文字寫在了圖片里。如果想要更加精細的設置，可以自行調整 CSS 的樣式。