首頁 >web前端 >html教學 >html中怎樣在圖片上加入文字

html中怎樣在圖片上加入文字

WBOY
WBOY原創
2021-11-09 16:15:0867018瀏覽

新增方法:1、使用position屬性為包含圖片和文字的容器元素div新增相對定位樣式;2、使用position屬性為文字元素新增絕對定位樣式;3、使用left和top屬性設定文字元素在圖片上的位置,將文字定位在圖片上即可。

html中怎樣在圖片上加入文字

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

html圖片上新增文字的方法:

#1、新建一個html文件,命名為test.html,用於講解html css怎麼在圖片上加入文字。

html中怎樣在圖片上加入文字

2、在test.html檔案中,使用div標籤建立一個模組,在div內,使用img標籤建立一張圖片。

html中怎樣在圖片上加入文字

3、在test.html檔案中,在div標籤內,使用p標籤建立一段文字,下面將透過css讓該段文字新增在圖片上。

html中怎樣在圖片上加入文字

4、在test.html檔案中,在css標籤中,透過「*」來初始化頁面所有元素內外邊距為0,避免影響下面css樣式定義。

html中怎樣在圖片上加入文字

5、在css標籤中,對div元素進行樣式設置,定義其位置屬性position為相對定位(relative)。

html中怎樣在圖片上加入文字

6、在css標籤中,對div內的p元素進行樣式設置,定義其位置屬性position為絕對定位(absolute),這個絕對定位是相對於圖片的位置而定的,讓文字距離圖片左邊緣10px,距離圖片上邊緣10px,並且設定文字顏色為紅色。

html中怎樣在圖片上加入文字

7、在瀏覽器中開啟test.html文件,查看實現的效果。

html中怎樣在圖片上加入文字

更多程式相關知識,請造訪:程式設計影片! !

以上是html中怎樣在圖片上加入文字的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn