CSS照片上打字是一種常見的網頁設計技巧。通過使用CSS，我們可以將文字嵌入到圖片中，實現照片上打字的效果。下面我們將介紹如何使用CSS照片上打字。

img {
position: relative;
}
img:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
white-space: nowrap;
}

首先，我們需要將圖片的位置設置為相對定位。

然后，我們在圖片前面添加一個偽元素（::before），并設置其為絕對定位。通過設置top、left和transform屬性，我們可以將偽元素居中顯示在圖片上。

在偽元素的content屬性中，我們可以輸入要顯示的文字。此外，我們還可以設置文字的顏色、字體大小、粗細、對齊方式等。

最后一步是設置偽元素的white-space屬性。通過將其設置為nowrap，我們可以防止文字換行。

通過以上步驟，我們就可以實現CSS照片上打字的效果了。如果想要進一步美化效果，可以嘗試調整偽元素的opacity屬性，或者添加背景色等。