在現代網頁設計中，將一些文字直接寫在圖片上已經不再是一個罕見的現象。這種方法可以增強網站的視覺效果，讓網頁更加精美。但是，如何在圖上寫文字？這就需要用到CSS的一些技巧了。 首先，在HTML代碼中，我們需要使用標簽來插入圖片。然后，為了方便后續的CSS定位，我們在標簽上添加一個id屬性。 `````` 接著，在CSS中，我們可以利用position和z-index屬性來精確定位文字的位置。例如，我們可以讓文字居中顯示在圖片的底部： ``` #img1 { position:relative; } #img1::after { content: '這是圖片上的文字'; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; color: white; } ``` 這樣，文字就會自動放置在圖片的底部居中位置。需要注意的是，我們是通過偽元素::after來插入文字的，而不是直接把文字寫在HTML代碼中。 如果我們需要在文字上添加背景色，我們可以使用background-color屬性，并將文字本身的顏色設置為透明: ``` #img1::after { content: '這是圖片上的文字'; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; color: transparent; background-color: black; padding: 10px; } ``` 這樣，文字的背景色就設置好了。 除了在圖片上直接寫文字，有時候我們還需要在圖片上標注某一個部分。這時，我們需要使用:before和:after偽元素，來定位標注文字的位置。例如，下面的代碼是在圖片上標注人物姓氏的例子： ``` #img1 { position:relative; } .marker { position:absolute; z-index:2; font-size: 16px; font-weight: bold; color: white; background-color: black; padding: 4px 8px; } .marker.lastname { top:190px; left:85px; } .marker.firstname { top:140px; left:98px; } .marker.lastname:before { content: '姓'; } .marker.firstname:before { content: '名'; } ``` 這樣，我們就可以在圖片上精確標注人物的姓氏和名字了。 當然，在使用CSS寫圖上文字的時候，可能會遇到一些不可避免的問題，比如在響應式設計中，文字位置和大小需要根據屏幕尺寸進行調整。但是，通過靈活的使用CSS技巧，我們可以克服這些問題，使網頁更加吸引人。