咱們這回來講講CSS如何對網頁的背景進行設定，網頁的背景是整個網頁的重要組成部分，他直接決定了整個網頁的風格和色調。我們這回主要來學習如何用CSS來設定背景顏色、背景圖片。
背景顏色：CSS設定背景顏色特別簡單：background-color：採用十六進位的設計方法。
背景顏色不但可以給網頁設定背景顏色，同樣也可以給網頁分塊。我們接下來看，用背景色給頁面分塊：我們看代碼：
<html><head><title>利用背景顏色分塊</title><style><!--body{padding:0px;margin:0px;background-color:#ffebe5;/* 頁面背景色 */}.topbanner{background-color:#fbc9ba;/* 頂端banner的背景色 */}.leftbanner{width:22%; height:330px;vertical-align:top;background-color:#6d1700;/* 左側導航條的背景色 */color:#FFFFFF;text-align:left;padding-left:40px;font-size:14px;}.mainpart{text-align:center;}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"><tr><td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td></tr><tr><td class="leftbanner"><br><br>首頁<br><br>分類討論<br><br>談天說地<br><br>精華區<br><br>我的信箱<br><br>休閑娛樂<br><br>立即註冊<br><br>離開本站</td><td class="mainpart">本文內容...</td></tr></table></body></html>
在整個body中採用了table來進行分塊，我們來看顯示效果：
這裡還要說一點的是：本文咱們並沒有給他設定顏色，然而在topbanner和leftbanner中卻設定了顏色，所以沒有設定顏色的就繼承body的，設定了之後就覆蓋原來的。通過背景色和對整個網頁進行分塊，能達到很好的排版的效果。
CSS不但可以設定頁面的背景顏色，同樣可以給背景添加圖片：我們看一下代碼
<html><head><title>背景圖片</title><style><!--body{background-image:url(03.jpg);/* 頁面背景圖片 */}--></style> </head><body></body></html>
我們看一下這個03.jpg：
然後我們看一下效果：
我們看到這個小圖片在橫向和縱向都布滿了這個頁面，效果很好。
我們剛才看到了一個小小的圖片的重複能布滿整個頁面，但是倘若我們不希望這樣重複，我們應該怎麼設定:
<html><head><title>背景重複</title><style><!--body{padding:0px;margin:0px;background-image:url(bg1.jpg);/* 背景圖片 */background-repeat:repeat-y;/* 垂直方向重複 */background-color:#0066FF;/* 背景顏色 */}--></style> </head><body></body></html>
我們看一下bg1.jpg是一副什麼樣的圖片：
我們回頭看代碼，我們設定了背景顏色，重複的方向還有背景圖片。我們看效果：
我們若把background-repeat設定為repeat-x那麼效果我想大家都知道，大家自己動手來完成。
我們剛才看到了背景圖片的重複，無亂是X軸，還是Y軸，都是從左上方開始的，倘若我們想改變這些呢，我們應該怎麼設定：我們繼續看背景圖片的位置：
我們看代碼：
<html><head><title>背景的位置</title><style><!--body{padding:0px;margin:0px;background-image:url(bg4.jpg);/* 背景圖片 */background-repeat:no-repeat;/* 不重複 */background-position:bottom right;/* 背景位置，右下 */background-color:#eeeee8;}span{/* 首字放大 */font-size:70px;float:left;font-family:黑體;font-weight:bold;}p{margin:0px; font-size:14px;padding-top:10px;padding-left:6px; padding-right:8px;}--></style> </head><body><p><span>雪</span>是大氣固態降水中的一種最廣泛、最普遍、最主要的形式。大氣固態降水是多種多樣的，除了美麗的雪花以外，還包括能造成很大危害的冰雹，還有我們不經常見到的雪霰和冰粒。</p><p>由於天空中氣象條件和生長環境的差異，造成了形形色色的大氣固態降水。這些大氣固態降水的叫法因地而異，因人而異，名目繁多，極不統一。為了方便起見，國際水文協會所屬的國際雪冰委員會，在徵求各國專家意見的基礎上，於1949年召開了一個專門性的國際會議，會上通過了關於大氣固態降水簡明分類的提案。這個簡明分類，把大氣固態降水分為十種：雪片、星形雪花、柱狀雪晶、針狀雪晶、多枝狀雪晶、軸狀雪晶、不規則雪晶、霰、冰粒和雹。前面的七種統稱為雪。</p><p>立冬 太陽位於黃經225°，11月7～8日交節<br>小雪 太陽位於黃經240°，11月22～23日交節<br>大雪 太陽位於黃經255°，12月6～8日交節<br>冬至 太陽位於黃經270°，12月21～23日交節<br>小寒 太陽位於黃經285°，1月5～7日交節<br>大寒 太陽位於黃經300°，1月20～21日交節</p></body></html>
我們看一下bg4.jpg:
代碼裡邊，我們設定了不重複，背景圖片的位置：右下開始重複，我們同時設定了背景圖片。我們看效果：
通過設定圖片的背景的位置，便可以很好的利用一些大圖片作為整個網頁的背景，而文字在上方。
我們剛才的效果可以發現，背景圖片與文字的相對位置是固定的，跟著圖片一起動，那麼我們應該怎麼設定
固定背景圖片呢？我們繼續看：
<html><head><title>固定背景圖片</title><style><!--body{padding:0px; margin:0px;background-image:url(bg6.jpg);/* 背景圖片 */background-repeat:no-repeat;/* 不重複 */background-attachment:fixed;/* 固定背景圖片 */}p{padding:10px; margin:5px;line-height:1.5em;color:#FFFFFF; font-size:22px;}--></style> </head><body><p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</p><p>CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。CSS是1996年由W3C審核通過，並且推薦使用的。簡單的說CSS的引入就是為了使得HTML能夠更好的適應頁面的美工設計。它以HTML為基礎，提供了豐富的格式化功能，如字型、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設定不同的樣式風格，包括顯示器、印表機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p></body></html>
我們看到代碼裡邊的background-attachment：fixed將背景圖片固定住，我們看效果：
當文字移動的時候，背景圖片不會隨著圖片的移動而移動。我們接下來繼續完善。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
