CSS規則可以在圖片中設置文字，這為網頁設計師提供了一種靈活的方式。通過在圖片上設置文本，可以更好地控制排版和布局，增強網頁的視覺效果。

img {
position: relative;
display: inline-block;
}
img::before {
content: "這是文本";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如上代碼，可以將文字添加在圖片上方，通過position屬性將圖片定位，再利用偽元素before在圖片上添加文本內容，通過定位和transform屬性將文本置于圖片中間位置。

而如果想將文字置于圖片下方，則可以通過調整偽元素內容為after，并將top屬性的值設置為圖片高度加上一定的間距即可。

img::after {
content: "這是文本";
position: absolute;
top: 120%;
left: 50%;
transform: translate(-50%, 0);
}

可以發現，在CSS的幫助下，為圖片增添文本內容變得容易而且直接。這種方法使得圖片預覽更為豐富，理解和吸引力也更強了。