HTML中插入背景圖的程式碼是什麼

來源:酷知科普網 2.45W

如果想在整個頁面上將一張大圖作為背景,用程式碼該怎麼實現呢

操作方法

(01)在body中建立背景圖片,就需要用到背景圖片屬性啦,如圖在background-image後面插入url;在rul後面就是新增的圖片連結位置

HTML中插入背景圖的程式碼是什麼

(02)如果我們只做了這麼一步,而且自己的圖片本來就不是很大,那麼在網頁上就會出現多拍重疊的圖片,

HTML中插入背景圖的程式碼是什麼 第2張

(03)這時候就需要將圖片重複現象去掉,設定程式碼background-repeat設定,而這裡就有多鍾設定方式了,可以將圖片只在橫排出現

HTML中插入背景圖的程式碼是什麼 第3張

(04)如圖在橫排出現重複

(05)也或者只讓他在豎排重複出現

HTML中插入背景圖的程式碼是什麼 第4張
HTML中插入背景圖的程式碼是什麼 第5張

(06)只讓他出現一張圖片的方法就是設定no-repeat;這樣在背景上就會顯示一張圖片了

HTML中插入背景圖的程式碼是什麼 第6張
HTML中插入背景圖的程式碼是什麼 第7張

(07)如果想要將這個圖片在整個背景上顯示,可以設定background-size:100%  auto;這樣就將背景只顯示一張圖片了

HTML中插入背景圖的程式碼是什麼 第8張
HTML中插入背景圖的程式碼是什麼 第9張

(08)在圖片背景的問題上,還可以對圖片背景進行定位處理。

HTML中插入背景圖的程式碼是什麼 第10張
熱門標籤