CSS中可以很輕易地在圖片上插入文字，這個技巧在設計網頁時非常有用。

img {
position: relative;
}
img::after {
content: "這是一段插入在圖片上的文字";
position: absolute;
font-size: 16px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼就可以在圖片上加入一段文字。首先需要給圖片設置相對定位，這樣才能接下來使用絕對定位插入文字。將文字插入到圖片里面可以使用偽元素::after。這個可以被理解為在圖片上加了一個透明的層，然后在這個層里面插入文字。接下來這段文字將會按照以下的CSS樣式進行展示。

{
position: absolute; /*文本定位*/
font-size: 16px; /*字體大小*/
color: #fff; /*字體顏色*/
top: 50%; /*上下位置*/
left: 50%; /*左右位置*/
transform: translate(-50%, -50%); /*居中*/
}

這段CSS中，首先是定位文本，然后將字體大小設為16像素，字體顏色為白色。然后設置上下位置為50%，左右位置也為50%，這樣就可以將文本居中展示。最后使用transform將文本居中。

這樣插入的文字就可以在圖片上進行展示了。