在CSS出現以前，Web開發人員只能對頁面和背景元素進行少量的控制。當然，那時候他們能使用background屬性將一個映像在整個頁面上進行平鋪，他們能用bgcolor屬性來控製圖像的背景顏色。但是他們的控制僅僅這些——例如，他們不能調節頁面背景映像的位置，不能控制平鋪（tiling），也不能產生頁面浮水印。
現在有了CSS，這些都得到了改變，它可以通過一組background-*指令準確控制頁面和元素背景。另外，它還提供了大量最佳化了的函數。使用CSS指令控制背景元素有很多優勢：它不需要任何特別的軟體，它能在大部分瀏覽器上工作，它可以對網站的背景映像和顏色進行集中控制。
聽起來是不是很有趣？接下來，我們來看看這些是怎麼回事，這篇文章介紹了CSS的background屬性，這個屬性為老的background屬性提供了另外一個選擇，它對控制頁面和元素背景的位置、顏色和布局來說是一個非常好的工具。
控制背景顏色
首先，讓我們來看看背景顏色屬性，該屬性定義了元素所應用的背景顏色。這個指令既可以接受十六進位的RGB值，也可以接受像red、silver或者blue這樣的“顏色單詞”。ListingA給了我們這樣的一個樣本：
Listing A
<html>
<head>
<style type="text/css">
.author {
background-color: #FFE303
}
.quote {
font-style: italic;
background-color: lime
}
</style>
</head>
<body>
<div class="author">William Shakespeare said:</div>
<p />
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
它運行後的結果如Figure A所示：
Figure A
Listing A的樣本
控制背景映像
如果你想使用背景映像來替代單一的顏色，可以使用background-image指令，這個指令允許你指定背景映像的URL。
Listing B
<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
}
</style>
</head>
<body>
</body>
</html>
Figure B就是它運行後的結果：
Figure B
Listing B 樣本
你也可以為一個特殊元素指定它的URL，就如Listing C所示：
Listing C
<html>
<head>
<style type="text/css">
.header {
width: 100%;
height: 60%;
border: solid 1px red;
background-image: url('mylogo.gif');
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
啟動並執行結果如Figure C所示：
Figure C
Listing C 樣本
控制背景映像重現
預設地，background-image指令可以對所選擇的映像進行水平和垂直方向兩個方向上的平鋪。通常，這些才是你想要的——在先前的例子中，假如你想使用公司的logo作為背景，同時可以控制它只出現一次，或者，只將背景映像設計成了垂直方向的。
對於所有的這些情況，CSS提過了background-repeat指令，這個指令接受下面四個值之一：repeat-x (只在水平方向重複), repeat-y (只在垂直方向重複), no-repeat (沒有重複), and repeat (在水平和垂直兩個方向重複)。
下面來看看它的實現，如Listing D所示，在第一個<div>中將平鋪（tiling）關閉了，也就是不進行重複，在第二個<div>中將logo水平重複。
Listing D
<html>
<head>
<style type="text/css">
.header1 {
width: 100%;
height: 35%;
border: solid 2px red;
background-image: url('mylogo.gif');
background-repeat: no-repeat;
}
.header2 {
width: 100%;
height: 60%;
border: solid 2px black;
background-image: url('mylogo.gif');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="header1"></div>
<p />
<div class="header2"></div>
</body>
</html>
Figure D給我們展示了它的運行結果：
Figure D
Listing D 樣本
控制背景映像位置
它也可能控制背景映像相關元素放置的位置。background-position指令既可以接受百分比，也可以接受長度，還可以接受像top, bottom, left, right和center這樣的關鍵字。現在我們來看看它是如何工作的，如Listing E所示，在這個樣本中將背景映像放置在容器元素的右下角。
Listing E
<html>
<head>
<style type="text/css">
.header {
width: 100%;
height: 80%;
border: solid 2px red;
background-image: url('mylogo.gif');
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
Figure E就是上面程式啟動並執行結果：
Figure E
Listing E 樣本
不必說，在放置單個背景映像時候，例如，在網頁上放置公司表徵圖的時候，這個指令是非常有用的。
控制背景映像滾動
最後，在CSS中，你可以設定在容器元素滾動的時候背景映像是否滾動。這個應用大部分使用在浮水印網頁上，它使用background-attachment指令，可以接受scroll 或者fixed這兩個值。Listing F這個例子告訴你如何產生一個出現在頁面右上方的浮水印。
Listing F
<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
</style>
</head>
<body>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
</body>
</html>
現在，當你試圖滾動這個頁面的時候，右上方的映像會相對於瀏覽器視窗保持固定，它不會隨頁面上的其它內容滾動下來。
Figure F
Listing F 樣本
當然，這些例子只是CSS背景應用中很小的一部分。然而，它們應該給了你一個在實際應用中使用這些屬性的方法，你現在也應該能將這些屬性應用到你的程式中了。所以，現在你還等什麼呢？開始編寫這些令人愉悅的代碼吧！
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
