在網頁設計中，圖片不僅可以用作裝飾，還可以用來傳遞信息。如果想要在圖片上添加文字，可以使用CSS來實現。以下是兩種方法：

/* 方法一：使用偽元素 */
.text-on-img {
position: relative;
}
.text-on-img::before {
content: "我是文字";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
color: #fff;
}

在這個示例代碼中，我們首先給包含圖片的元素（.text-on-img）設置了position: relative;。這是為了讓偽元素能夠相對于該元素進行定位。接下來，我們使用::before偽元素添加文字，并設置文字的內容、位置和樣式。

/* 方法二：使用背景圖和padding */
.text-on-img {
background-image: url('path/to/image.jpg');
background-size: cover;
padding: 50px;
}
.text-on-img p {
color: #fff;
font-size: 1.5rem;
}

在這個方法中，我們將文字作為包含在圖片的背景圖上。我們把圖片作為background-image設置，并用background-size: cover;讓圖片鋪滿容器。接下來，我們使用padding設置圖片邊緣的空白區域，并在這個區域內添加文本。

無論使用哪種方法，都可以讓我們在圖片上添加自己想要的文本。只需選擇適合你需求的方法，并使用CSS發揮你的創造力。