第三課：顏色與背景
這一課將教你如何將顏色和背景色適用于網站。我們還會看到定位和控制背景圖像的更先進方法。下面的CSS特性將解釋：
color
background-color
background-image
background-repeat
background-attachment
background-position
background
前景顏色: [color]
前景特性描述了一個元素的前景顏色。例如，假設我們想要文件中的所有標題都是深紅色。標題都可以用HTML元素<h1>標示。下面的代碼將<h1>元素的顏色設定為紅色。
h1 {
color: #ff0000;
}
顏色既可以輸入十六進制值（如#ff0000），也可以用顏色名稱“red”或RGB（如255,0,0）標示。
背景顏色:[background-color]
背景顏色屬性描述了元素的背景色。所有HTML文檔都包含元素<body>。因此，要改變整個頁面的背景色，背景顏色特性應適用于元素。
也可以將背景顏色用于包括標題和文本在內的其它元素。如下面的例子，就給<body>和<h1>適用了不同的背景色。
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
注意，我們通過一個分號給<h1>適用了兩個特性。
背景圖像[background-image]
CSS的背景圖像特性可以用于插入背景圖片。我們下面以蝴蝶作為背景圖像實例。將圖片下載到你的電腦硬盤中，或使用另一個圖片均可。要把作為背景的蝴蝶圖片插入一個網頁，只需要施用背景圖片特性給<body>，并定義圖片位置即可。
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
注意：我們將圖片位置定位為URL（”butterfly.gif”）。這意味著圖片與樣式表都在同一個文件夾。當然，也可以將圖片設置為其它文件夾URL（如“../images/butterfly.gif”），或完整的網址URL（如”http://www.html.net/butterfly.gif”）。
重復背景圖像[background-repeat]
在上面的實例中，你是否注意到默認的蝴蝶是水平和垂直重復覆蓋在整個屏幕上？背景重復特性控制這一行為。下面的表單列出了不同的背景重復值。
Value
Description
Example
background-repeat: repeat-x
圖像水平重復
Show example
background-repeat: repeat-y
圖像垂直重復
Show example
background-repeat: repeat
圖像水平和垂直重復
Show example
background-repeat: no-repeat
圖像不重復
Show example
例如，想避免背景圖片重復，可以用下面的代碼：
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
鎖定背景圖像[background-attachment]
“background-attachment”特性定義了一個背景圖片是固定，還是可以隨包含的元素上下移動。固定背景圖片不會在讀者上下換行時與文本一起移動，但未鎖定的圖片會隨網頁文本一起移動
。下面表單概括了“background-attachment”的兩個不同值。點擊實例查看可移動和固定的區別。
Value
Description
Example
Background-attachment: scroll
圖像隨頁面滑動-未鎖定
Show example
Background-attachment: fixed
圖像鎖定
Show example
例如，下面的代碼將會固定背景圖片。
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
放置背景圖片[background-position]
默認情況下，背景圖片將會放置在屏幕左上角。特性“background-position”能讓你改變這一默認，并將背景圖片放在屏幕中想要的地方。設置背景位置的方法有很多。它們都是坐標系的格式。例如，‘100px 200px’這個值就是指背景圖片位置從左側起100px，并且從瀏覽器窗口上面起的200px。
坐標系還可以用瀏覽窗口的百分比，固定單元（pixels和centimetres等）標示，或直接用單詞top，bottom，center，left和right標示。下面舉例說明這一系統的模式。
下面的表單給出一些實例：
Value
Description
Example
background-position: 2cm 2cm
圖像位置是左起2厘米，下起2厘米
Show example
background-position: 50% 25%
圖像在中心和頁面下部四分之一處
Show example
background-position: top right
圖像位于圖像的右上角
Show example
下面代碼實例將背景圖片放置在右下角：
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
綜合[background]
特性background是這一課中所有background特性的綜合性應用。使用background能精簡許多特性，讓你以簡短的方式寫出更容易閱讀的樣式表。注意下面的這五行：
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
用background只需要一行代碼就可以獲得同樣結果：
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
列表的順序是：
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
如果一個特性是左邊起，它會被自動設置為默認值。這里我們以background-attachment與background-position為例：
background: #FFCC66 url("butterfly.gif") no-repeat;
這兩個特性未指定，僅僅設置為上下拉動和頂部左側的默認值。
概述
你從這一課學到了HTML做不到的新技術。下一課更好玩，能用CSS描述字體的同時檢查可能的廣度范圍。
版權宣告：
作者：Riley.Chou
連結：https://sh100k.com/%e7%ac%ac%e4%b8%89%e8%af%be%ef%bc%9a%e9%a2%9c%e8%89%b2%e4%b8%8e%e8%83%8c%e6%99%af/
來源：SH100K – 生活百科
文章版權歸作者所有，未經允許請勿轉載。
