小編給大家分享一下html在圖片上設置字體的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html在圖片上設置字體的方法：首先在html文件中，建立一個div；然后在里面設置一個圖片和文字h2；接著通過“h2{position:absolute;top:20px;left:10px;}”將字移動到圖片的上方即可。

在html文件中，先建立一個div，然后在里面設置一個圖片和文字h2，如圖所示

現在打開后的樣式是這樣的，如圖，圖片在上，文字在下

然后對h2進行簡單修飾，對文字大小font-size和文字顏色color加以修飾

如圖所以效果，現在是這樣的，這樣待會將字移動到圖上面時，字也不會超出范圍。

如果要要將字移動到圖片的上方，這里就需要定位一下，設置div為父級，為相對定位；設置h2為絕對定位：

div{position:relative;}
h2{font-size:16px;color:red;position:absolute;top:20px;left:10px;}

這樣設置后，如圖所示，最后效果就是這樣了，已經文字內容移動到了圖片上方。

以上是“html在圖片上設置字體的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！