CSS如何設置html網頁背景圖片

小編給大家分享一下CSS如何設置html網頁背景圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、網頁單色背景    -   TOP

如果純顏色的網頁背景，只需要對body設置background背景顏色即可

body{background:#FFF}

設置網頁背景為白色

二、規律背景圖片   -   TOP

1、從上到下漸變橫向相同背景

漸變從上到下寬度全屏背景效果截圖

這種網頁背景只需要切出1像素寬，高度合適的圖片作為背景素材，如下圖：

切出這樣一個豎條圖片素材作為背景素材

body{background:#FFF url(bg.gif) repeat-x 0}

這樣設置這個圖片為背景圖片靠網頁頂部水平平鋪，背景為白色，這里注意根據你的圖片路徑設置好引入圖片路徑。

2、水平平鋪類背景圖片
比如2014版DIVCSS5網頁，原理和漸變平鋪相同，也是切出一豎條后作為Body背景水平平鋪實現，這樣就全屏網頁背景鋪滿。

css切出這樣一個豎條效果截圖

代碼和第1種相同，只是圖片不同而已。對body設置背景圖片水平平鋪。

三、不規律大圖背景    -   TOP

常常看到一些專題或形象網頁，背景是一種非常大圖片作為背景，而通常情況下寬屏和窄屏顯示器都能顯示鋪滿的全屏背景圖片，就像圖片能自適應寬度大小一樣的。其實這種實現一樣非常簡單，將這張圖片寬度美工設計足夠大，比如市場上最寬顯示屏分辨率寬度為2560像素，那么要讓這樣的寬屏顯示器瀏覽此網頁也能鋪滿全屏，那么你的這張背景圖片就必須做成寬度大于或等于2560px寬度的，這樣以來寬屏、窄屏顯示器打開此網頁都能鋪滿全屏，最小化、最大化、改變瀏覽器窗口打開背景圖片都是全屏的居中的看上去就像背景圖片自適應大小一樣。

關鍵：全屏自適應背景圖片關鍵是圖片做足夠寬，以最寬分辨率顯示屏能都鋪滿，小分辨率自然就更是鋪滿。同時需要設置這樣背景圖片作為body背景后需要居中。

假如這張背景圖片為：bg.jpg
設置CSS代碼：

body{background: url(bg.jpg) no-repeat center 0}

代碼解釋：設置這個圖片為網頁背景，通常不平鋪（no-repeat），水平居中，靠上顯示

四、頭部背景圖片和底部背景圖片內容多少高度可增減頭部底部背景不變    -   TOP

這里DIVCSS5為大家介紹兩種常見頭部和底部不同背景圖片技巧設置布局方法。

1、頭部和版權圖片
這種直接將頭部背景圖片設置為body背景居中靠上顯示，底部版權地方DIV設置寬度100%；同時設置此背景圖片或背景顏色。

body{background: url(bg.jpg) no-repeat center 0} #footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

這樣即可實現頭部底部背景不同，同時不受內容多少高度影響。

2、網頁靠頂部上背景圖與固定底部靠下背景圖
而靠底部背景圖片遠超出了版權底部盒子高度。

網頁靠上靠下背景圖片不同，內容區域跨越靠上和靠下的背景效果截圖

這樣的結構上下不同圖片，不隨中間內容增高減少影響背景布局，通常對html標簽和body設置背景即可實現。

假如頂部深藍背景圖片為“top.jpg”,底部淺藍背景圖片為“foot.jpg”

DIV CSS設置網頁背景關鍵CSS代碼：

html{background: url(top.jpg) no-repeat center 0} body{background: url(foot.jpg) no-repeat center bottom}

解釋：設置深藍背景圖片為html背景水平居中靠上；設置淺藍背景圖片為body背景圖片水平居中靠下。

以上是“CSS如何設置html網頁背景圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！