想在HTML中設置網頁背景顏色，你只需要在標籤中的“body”元素做些簡單的更改就行了。這些步驟根據你想要的效果而略有不同。本文會教你如何設置單色背景、圖片背景、漸變背景或動態變色背景。
（01）用你常用的文本編輯器打開HTML文件。從HTML5開始就不再支持<bgcolor>屬性了。你想設置背景顏色和網頁其它方面的樣式，就得使用CSS。
（02）在文件中添加標籤。網頁所有樣式信息都應該編寫在這兩個標籤之中，包括背景顏色。如果文件已經有了標籤，你只需要滾動到有關部分。<!DOCTYPE html><html><head><style></style></head></html>
（03）在標籤中輸入“body”元素。你在這裏面編寫的所有信息會影響整個網頁。<!DOCTYPE html><html><head><style>body{}</style></head><body></body></html>
（04）在“body”元素中添加“background-color”屬性。在這個情況中，有效屬性只有“color”，千萬不要輸入“colour”。<!DOCTYPE html><html><head><style>body{background-color:}</style></head><body></body></html>
（05）在“background-color”屬性中輸入你想要的背景顏色。你可以輸入顏色名稱，比如、、等，也可以使用16進制顏色代碼，比如是黑色、是紅色等。你還可以輸入RGB顏色值，比如是黃色。下面的例子使用16進制代碼，網頁背景顏色會和wikiHow網站橫幅一樣：<!DOCTYPE html><html><head><style>body{background-color:#93B874;}</style></head><body></body></html>白色：淡粉紅色：紅褐色：靛藍色：紫羅蘭色：w3school網站的HTML顏色名列表羅列了各種顏色的16進制代碼。你可以在這裏參考你要的顏色。
（06）利用“background-color”設置其它元素的背景色。在body元素用“background-color”設置網頁背景色時，你還可以定義其它元素的背景色。在標籤中的background-color屬性加上這些元素就可以了 。<!DOCTYPE html><html><head><style>body{background-color:#93B874;}h1{background-color:orange;}p{background-color:rgb(,,);}</style></head><body><h1>網頁標題區的背景會是橙色的</h1><p>這個段落的背景顏色會是紅色背景色</p></body></html>
（01）在文本編輯器打開HTML文件。許多人比較喜歡用圖片當網站背景。你可以使用任何圖片、照片、圖案或紋理。從HTML5開始，所有類型的背景都必須用CSS（層疊樣式表）的標籤設置。
（02）在文件中添加標籤。網頁所有樣式信息都應該編寫在這兩個標籤之中，包括背景顏色。如果文件已經有了標籤，你只需要滾動到有關部分。<!DOCTYPE html><html><head><style></style></head></html>
（03）在標籤中輸入“body”元素。你在這裏面編寫的所有信息會影響整個網頁。<!DOCTYPE html><html><head><style>body{}</style></head><body></body></html>
（04）在“body”元素中添加“background-image”屬性。你需要輸入圖像文件名。圖像文件一定和HTML文件同在一個文件夾裏，或者你可以輸入有關圖片的完整網址。<!DOCTYPE html><html><head><style>body{background-image:網址（"imagename.png"）,background-color:#93B874;}</style></head><body></body></html>最好再多加一個屬性，萬一背景圖片加載失敗，網頁背景也不會是空白的。
（05）使用多張圖片，實現多層背景效果。你可以將多張圖片疊加在一起。如果你的圖片是透明背景，疊加在一起可以相互補充，那麼這個方法很適合你。<!DOCTYPE html><html><head><style>body{background-image:網址（"image1.png"）,網址（"image2.gif"）;background-color:#93B874;}</style></head><body></body></html>第一個圖片會出現在最上方，第二個圖片會出現在第一個圖片的後面。
（01）用CSS設置漸變背景。你覺得單色背景太單調了，想要更獨具一格，但又不想要自動變色背景那樣讓人眼花繚亂？那不妨試一試漸變背景吧。漸變指的是從一個色彩緩慢過渡到另一個色彩。你可以用CSS創造和自定義你想要的漸變效果。在這之前，你得先了解CSS的基本概念。
（02）瞭解基本語法。創造漸變效果時，你需要設置兩個參數，也就是起始點或角度，還有要產生漸變過渡效果的顏色。你可以選擇多個顏色進行漸變，並設置漸變方向或角度。background:linear-gradient(方向或角度，顏色，顏色，顏色等);
（03）實現垂直漸變。如果你沒有指定方向，顏色會從上往下漸變。不同的瀏覽器在實現漸變效果時會有些不同，所以你需要涵蓋幾個版本的編碼。<!DOCTYPE html><html><head><style>html{min-height:100%;/*你需要設置這個參數，確保漸變效果填滿整個頁面，不會被切斷*/}body/* Chrome 10+, Safari 5.1+ */background:-webkit-linear-gradient(#93B874,#C9DCB9);/* Opera 11.1+ */background:-o-linear-gradient(#93B874,#C9DCB9);/* Firefox 3.6+ */background:-moz-linear-gradient(#93B874,#C9DCB9);/* 標準語法（一定要放在最後）*/background:linear-gradient(#93B874,#C9DCB9);/*最好設置一個背景顏色，萬一漸變效果加載失敗，背景也不會是空白的*/background-color:#93B874;</style></head><body></body></html>
（04）實現定向漸變。你可以通過添加漸變方向改變顏色漸變的方式。注意，不同的瀏覽器詮釋方向的方式也不一樣。下面的例子會在不同的瀏覽器產生相同的漸變效果。<!DOCTYPE html><html><head><style>html{min-height:100%;}body/* 從左到右 */background:-webkit-linear-gradient(left,#93B874,#C9DCB9);/* 在右邊終止 */background:-o-linear-gradient(right,#93B874,#C9DCB9);/* 在右邊終止 */background:-moz-linear-gradient(right,#93B874,#C9DCB9);/* 往右 */background:linear-gradient(toright,#93B874,#C9DCB9);/* 最好設置一個背景顏色，萬一漸變效果加載失敗，背景也不會是空白的 */background-color:#93B874;</style></head><body></body></html>
（05）用其它屬性調整漸變效果。你還可以做更多更復雜的漸變效果。舉個例子，你不但可以添加2種以上的顏色，還能在每種顏色後面加上百分比，設置每種顏色的間距。background:linear-gradient(#93B87410%,#C9DCB970%,#00000090%);給顏色添加透明效果。這會讓顏色慢慢褪去。讓同一種顏色從彩色變成完全透明。你需要用功能定義顏色。最後一個值表示透明度，是完全不透明，是完全透明。background:linear-gradient(toright,rgba(,,,),rgba(,,,));
（01）找到HTML編碼的部分。如果你不喜歡單色背景，那就試一試這個自動變色的背景吧。從HTML5開始，背景顏色必須用CSS（層疊樣式表）定義。如果你從未用CSS設置過背景顏色，在嘗試這個方法之前，先參看單色背景。
（02）在“body”元素添加animation屬性。你需要添加兩個不同的屬性，因為不同的瀏覽器用的編碼不一樣。<!DOCTYPE html><html><head><style>body{-webkit-animation:colorchange 60s infinite;animation:colorchange 60s infinite;}</style></head><body></body></html>屬性用在基於Chromium的瀏覽器，比如Chrome、Opera和Safari。屬性則是其它瀏覽器的標準語法。是在這個例子中的動畫效果。是動畫效果或過渡的時長，也就是60秒。webkit和標準語法都要設置時長。表示一直重複動畫效果。如果你只想要各種顏色循環一次，然後停在最後一個顏色，那就跳過這個部分。
（03）在animation屬性中添加顏色。現在你將用@keyframes規則設置要循環的背景顏色，和每種顏色出現的時長。不同的瀏覽器用的編碼不一樣，你需要輸入兩套編碼。<!DOCTYPE html><html><head><style>body{-webkit-animation:colorchange 60s infinite;animation:colorchange 60s infinite;}@-webkit-keyframes colorchange {0%{background:#33FFF3;}25%{background:#78281F;}50%{background:#117A65;}75%{background:#DC7633;}100%{background:#9B59B6;}}@keyframes colorchange {0%{background:#33FFF3;}25%{background:#78281F;}50%{background:#117A65;}75%{background:#DC7633;}100%{background:#9B59B6;}}</style></head><body></body></html>注意，和這兩個規則有相同的背景顏色和百分比。你需要確保所有參數一致，這樣不管用哪一種瀏覽器打開網頁，都有一樣的瀏覽體驗。、等百分比指的是動畫總時長的百分比。頁面加載時，背景顏色是你在設置的。一旦動畫進行到60秒的25%，背景會變成，以此類推。你可以修改時間和顏色，得到你想要的效果。
酷知知識幫
