HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字

來源:酷知科普網 1.93W

HTML中怎樣讓文字覆蓋在圖片的上面這個問題對於初學網頁的小夥伴來說有點難,今天小編我就來分享一下網頁中文字在圖片上面的方法。

操作方法

(01)比如我在div裡面書寫了一些文字,然後想要在放入一張圖片,這時候小夥伴可能會直接想到img標籤,其實這個想法是錯誤的。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字

(02)首先,我們應該先給div設定寬度和高度,保證文字有一個範圍。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字 第2張

(03)然後通過background給div新增一張圖片作為它的背景。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字 第3張

(04)如圖,通過url()來連線圖片,url裡面放置的就是背景圖片的路徑。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字 第4張

(05)如圖,我就隨意的放了一張圖片用作背景,注意,路徑要寫對哦。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字 第5張

(06)這樣,儲存之後文字就會覆蓋在圖片的上面了,而如果使用img標籤,則沒有這種效果。

HTMLcss怎樣讓文字覆蓋在圖片上面,圖片上加字 第6張

特別提示

如果這條幫助到了你,可以把它分享給你的小夥伴們哦。

也可以點選頭像瀏覽我的其他,有什麼問題可以評論留言哦!

熱門標籤