網站顏色和背景屬性
作者：佚名 時間：2014-03-15 分享到：
網站文檔中的每個元素都有一種前景顏色和一種背景顏色。在有些情況下，背景不是顏色，而是一幅色彩豐富的圖像。color和background樣式屬性控制著這些顏色和圖像。
HTML/XHTML無素的子元素通常會從它們的父元素那里繼承前景色顏色。例如，如果將
文本定為紅色，能夠識別樣式的瀏覽器也將標題和段落文本顯示為紅色。然而背景屬性行為與之不同，它們不能被繼承。相反，每個元素都有一個默認的透明背景，允許父類背景透過其展現出來。這樣，設置
標簽的背景圖像時，不會出現為標簽的每一個元素重新裝載該圖像的情況。反之，瀏覽器只加載一次圖像，并在文檔其余部分的后面顯示它，這樣，所有那些本身沒有明確的背景顏色或圖像的元素都會以該圖像作為背景。background-attachment屬性
如果為某元素指定了一個背景圖像，可用background-attachment(背景附件)屬性來控制圖像鏈接到瀏覽器顯示窗口的方式。如果使用默認值scroll，當用戶在整個文檔內滾動時，瀏覽器會隨著元素移動背景圖。fixed值則能防止圖像的移動。瀏覽器都支持這個基本的屬性。
background-color屬性
background-color屬性控制的是元素的背景顏色（你猜對了！）。要將它設置為一個顏色值或關鍵字transparent（默認值）。其效果應該是透明的。
我們習慣于用
標簽的特殊屬性來為整個文檔設置背景顏色，而background-color樣式屬性可以應用于任何元素。例如，要設置項目列表中某項的背景顏色，可以使用：同樣，文檔中所有表頭的單元格可以用下面的代碼來設定反白效果：
th{background-color: black; color: white}
如果真的需要突出強調文本，并將其背景設定為紅色，可以命名用下列代碼：
em {background-color: red}
瀏覽器以前的版本沒有明確地支持css2屬性，但是通過它支持的一般background屬性也可以行到同樣的效果，如以上所描述的那樣。
background-image屬性
background-image屬性可以在元素內容后面放置一個圖像。它的值可以是一個URL，也可以是關鍵字none(默認值)。
與背景顏色一樣，也可以在整個文檔后面，或者在文檔中選中的元素后面放置一個背景圖像。通過利用這相樣式屬性，諸如在表格或選中文本后面放置圖像的效果，現在就很容易實現了：
li.marble{background-image: url(backgrounds/marble.gif)}
第一個示例用的是內聯樣式，將一個圖像放在了表格后面。第二個示例定義了一個列表項目類，將一個大理石（marble）背景放在了使用class=marble屬性
- 標簽后面。例如，下列示例是XHTML中的一段代碼：
這行代碼將在網站中產生如下圖所示的效果。
如果圖像比包含元素大，它將被裁剪為與元素所占區域的大小相同。如果圖像比該元素小，將重復使用該圖像來填滿元素所占的位置，background-repeat屬性值指明了這一點。
可以用background-position屬性來控制圖像在元素內的位置。圖像的滾動行為則由background-attachment屬性管理。
當背景顏色和背景圖像看起來不協調時，即使正在使用背景圖像，通常也應該定義一種背景顏色。那樣的話，如果圖像不可用，例如，當用戶不能自動下載圖像時，瀏覽器會顯示背景色來代替背景圖像。此外，如果背景圖像有透明區域，背景色可以用來填充那些區域。
background-position屬性
默認情況下，能夠識別樣式的瀏覽器將從分配的顯示區域的左上角開始放置背景圖像，并將較低平鋪到同一區域的右下角。使用background-position屬性時，可以根據背景圖像的默認位位置，將其起如位置向下或向右移動一個絕對（長度）或相對（百分比或關鍵字）的偏移量距離。結果，該圖像將從偏移的起始點開始填充，而且平鋪會從該點開始由左向右、由上到下的填充顯示空間。
可以為background-position屬性指定一個或兩個值。如果用的是一個值，它將同時應用于垂直和水平位置。如果是兩個值，那么第一個值表示水平偏移，第二個值表示垂直偏移。
對于在其后面顯示背景圖像的元素來說，長度值指明了相對于該元素左上角而言的絕對距離。
例如：
table{background-image: url(backgrounds/marble.gif);
background-position: 10px 20px}
上述代碼以文檔中任何
元素的左上角為基準，將背景向右偏移了10個像素，向下偏移了20個像素。
使用百分比值需要相對較多的技項，但卻更容易使用一些。從左到右、從上到下地以0%-100%的范圍進行計算，結果是，元素的內容顯示空闡的中央位置是50%和50%。與此類似，這塊區域的偏右三分之一和偏下三分之二分別是33%和66%。因此，以上面示例中的網站建設類型為例，要將其移動到元素內容顯示空間的中心，可以使用以下代碼：
background-position:50% 50%
注意，瀏覽器把第一張marble.gif圖像平鋪在內容顯示區域的中央，并向窗口的右下方面進行了平鋪。但是，如果只用一個詞就可以達到同樣的效果，為什么還要使用數字呢？因此，可以使用關鍵字left、center和right，以及top、center和bottom，它們分別代表0%、50%和100%。要將圖像放在標簽內容區域的中央位置，可以使用如下代碼:background-position: center center
可以混合使用長度和百分比值，那么：background-position: 1cm center
這行代碼將把圖像放在標簽左邊緣向各的方向1厘米處，并在標簽區域中垂直居中的位置。
background-repeat屬性
瀏覽器通常會平鋪背景來充充分配的區域，也就是水平和垂直方向向上重復顯示該圖像。使用background-repeat屬性可以改變這種“repeat(重復)”行為。如果要圖像只在水平方向重毛毛蟲而垂直方面不毛毛蟲復，可使用repeat-x值。如果只想在垂直方向上重復，可使用repeat-y值。如果要禁止重復，可以使用no-repeat值。
這個屬性的通常用法是在頁面的北京上放置一個水印或標記，而不必一次又一次地重復這個圖像。例如，下列代碼將在頁面中央的背景上放置水印圖像：
body{background-image: url(backgrounds/watermark.gif);
background-position: center center;
background-repeat: no-repeat;
}
一種流行的技巧是沿著頁面的右邊創建一條垂直的帶子：
body {background-image: url(backgrounds/ribbom.gif);
background-position: top right;
background-repeat: repeat-y
}
