在網(wǎng)頁設計中，加入文字到圖片上是一個很常見的需求。通過CSS，我們可以很輕松地實現(xiàn)這個功能，使圖片更生動、有趣。 下面，讓我們看一下如何使用CSS在圖片上加上字。 首先，我們需要在HTML中添加一個圖片元素，例如：

<img src="example.png">

然后，我們可以使用CSS的偽元素`::after`或`::before`來添加文字。例如，我們要在圖片右下角加上一段文字：

img {
position: relative;
display: block;
}
img::after {
content: "這是圖片上的文字";
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
}

上面的代碼中，我們給圖片添加了一個`position: relative;`的樣式，這樣我們才能用`position: absolute;`來定位偽元素。然后，我們使用`::after`來添加文字，給文字定義了一個白色帶透明度的背景，并用`padding`來給文字留一些空隙。 還可以通過`transform`來旋轉(zhuǎn)、縮放或偏移偽元素，例如：

img::after {
content: "這是圖片上的文字";
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-15deg);
}

上面的代碼中，我們給偽元素添加了一個`transform: rotate(-15deg);`的樣式，使文字旋轉(zhuǎn)了15度。 除了`::after`和`::before`，我們還可以使用其他偽元素來添加文字，例如`::first-line`、`::selection`等等。 在實際應用中，我們可以根據(jù)需求來調(diào)整樣式，使圖片上的文字更加生動、有吸引力。