新增方法:1、使用position屬性為包含圖片和文字的容器元素div新增相對定位樣式;2、使用position屬性為文字元素新增絕對定位樣式;3、使用left和top屬性設定文字元素在圖片上的位置,將文字定位在圖片上即可。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
html圖片上新增文字的方法:
#1、新建一個html文件,命名為test.html,用於講解html css怎麼在圖片上加入文字。
2、在test.html檔案中,使用div標籤建立一個模組,在div內,使用img標籤建立一張圖片。
3、在test.html檔案中,在div標籤內,使用p標籤建立一段文字,下面將透過css讓該段文字新增在圖片上。
4、在test.html檔案中,在css標籤中,透過「*」來初始化頁面所有元素內外邊距為0,避免影響下面css樣式定義。
5、在css標籤中,對div元素進行樣式設置,定義其位置屬性position為相對定位(relative)。
6、在css標籤中,對div內的p元素進行樣式設置,定義其位置屬性position為絕對定位(absolute),這個絕對定位是相對於圖片的位置而定的,讓文字距離圖片左邊緣10px,距離圖片上邊緣10px,並且設定文字顏色為紅色。
7、在瀏覽器中開啟test.html文件,查看實現的效果。
更多程式相關知識,請造訪:程式設計影片! !
以上是html中怎樣在圖片上加入文字的詳細內容。更多資訊請關注PHP中文網其他相關文章!