在網頁設計中，我們常常需要在圖片上添加文字，這種效果可以通過CSS很容易地實現。

首先，我們需要將圖片作為背景圖片，可以使用background-image屬性。然后，通過padding屬性來調整圖片和文字之間的距離。接著，使用background-clip屬性來指定背景圖片的范圍，通常選擇padding-box，即圖片范圍不會超過padding區域。

.example {
background-image: url("path/to/image.jpg");
padding: 20px;
background-clip: padding-box;
}

接下來，我們需要在 .example 元素中添加文字，可以使用 ::before 或 ::after 偽元素來實現。這兩個偽元素都是在 .example 元素內部的，并且默認是相對定位，也就是說它們的位置可以通過top、left等屬性來調整。

例如，我們將文字放置在圖片的中心，可以使用絕對定位，并通過 transform 屬性來改變文字的位置。我們還可以通過 white-space 屬性來保證文字不會被截斷， display: flex 和 align-items 屬性來垂直居中文字等等。

.example::before {
content: "這是一段文字";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
display: flex;
align-items: center;
}

通過上述方法，我們可以在網頁中很方便地實現將文字放到圖片上的效果。