在網頁設計中，一張好看的圖片往往可以讓網頁更加生動，而通過 CSS 圖片中插入字則可以讓圖片更有趣味性和信息價值。

首先，我們可以使用 CSS 的 background-image 屬性，將圖片設置為元素的背景，并使用 background-size 屬性將圖片填充整個元素。接著，我們可以通過偽元素 ::before 或 ::after 在元素的特定位置插入字體內容。

{
background-image: url('example.jpg');
background-size: cover;
position: relative;
}
::before {
content: "文字內容";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: white;
text-shadow: 1px 1px black;
}

在上面的代碼片段中，我們使用了 ::before 偽元素來插入字體內容。通過設置 position 屬性為 absolute 實現了在元素特定位置定位；通過 top、left 和 transform 屬性將字體內容居中顯示。設置 font-size 和 color 屬性調整文字大小和顏色，設置 text-shadow 屬性給文字添加了陰影效果，讓文字更加立體。

此外，如果想要在圖片中插入多段文字，我們可以將 ::before 或 ::after 偽元素設置為內聯元素，并分別使用偏移量將不同的文字分布在不同的位置。

{
background-image: url('example.jpg');
background-size: cover;
position: relative;
}
::before {
content: "文字內容1";
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -10%);
display: inline;
font-size: 1.5em;
color: white;
text-shadow: 1px 1px black;
}
::after {
content: "文字內容2";
position: absolute;
bottom: 10%;
right: 50%;
transform: translate(50%, 10%);
display: inline;
font-size: 1.5em;
color: white;
text-shadow: 1px 1px black;
}

通過上述代碼，我們將 ::before 偽元素的 top 屬性設置為 10%，讓其位于圖片上方偏上， ::after 偽元素的 bottom 屬性設置為 10%，讓其位于圖片下方偏下。通過設置 display 屬性為 inline 將兩段字體內容排列在同一行。通過調整 left 和 right 的值使兩段文字分別位于圖片的左右兩側。

CSS 圖片中插入字是一種在網頁設計中常用的技巧，它可以為網頁增加趣味性和信息價值。通過上述方法，我們可以靈活地應用該技巧，讓網頁更加生動且有吸引力。