CSS中的圖片加字技術經常被用來為網頁添加說明、標題或其它標識性文字。下面我們來介紹一下如何在圖片上添加文字。

/* 添加圖片 */
.img {
background-image: url("example.jpg");
width: 300px;
height: 200px;
position: relative;
}
/* 添加文字 */
.img:before {
content: "這是一張漂亮的圖片";
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上面的代碼中，我們首先通過CSS創建了一個300像素寬、200像素高的背景圖片。接下來我們使用:before選擇器在背景圖片上添加文字。通過設置position為absolute以及top、left、transform等屬性，我們可以為文本創建居中對齊的效果。

注意，添加文字的技術僅適用于背景圖片，當圖片是img標簽時，我們需要使用position:relative來添加文字，并且會在圖片周圍留下留白。

通過這種簡單的技巧，我們可以為網頁中的圖片添加文本，并且不用使用繁瑣的圖片編輯軟件操作。這樣既可以提高工作效率，又可以使網頁更加美觀。