網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好
當前位置:酷知知識幫 > 遊戲數碼 > 電腦

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

欄目: 電腦 / 發佈於: / 人氣:1.9W

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張

特別提示

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

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