在網頁設計中，經常需要在圖片上加上一些說明文字，這是非常常見的需求。在這種情況下，使用CSS來實現這一效果是一種非常方便和靈活的方法。 首先，在HTML中使用img標簽來插入需要加文字的圖片，例如： ```

這是一個漂亮的風景圖片：

``` 接下來，在CSS中使用position屬性將文字放置在圖片上方或下方。使用pre標簽來呈現CSS代碼，例如： ```

img {
position: relative;
display: block;
margin: 0 auto;
width: 80%;
}
img:before {
content: "這是一幅漂亮的風景圖片";
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 20px;
text-align: center;
color: white;
text-shadow: 2px 2px 2px black;
}

``` 在CSS代碼中，我們使用了:before偽元素來實現在圖片上方添加文字。我們還使用absolute定位和top、left和right屬性來將文本放置在圖片的頂部，并使用font-size、text-align和color屬性來設置字體大小、對齊方式和顏色。為了增加文本的可讀性，在文本周圍應用了一個黑色的陰影。 此外，還需要注意將img元素的display屬性設置為block，使其獨占一行，以便我們在其上方或下方放置任何元素。 總的來說，使用CSS來在圖片上添加文字是一個非常靈活和方便的方法。我們可以根據需要在任何位置添加文本，而不會影響圖片的大小和位置。