摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應(yīng)商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設(shè)計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。

背景對網(wǎng)站的設(shè)計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設(shè)置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。

在CSS中，元素的背景可以是一個純色，一張圖，一個漸變色或者它們的組合。在我們決定如何實現(xiàn)背景之前，我們要考慮到背景是為了網(wǎng)站的整體布局服務(wù)的。

在這節(jié)課中，我們將會學習如何在元素上實現(xiàn)各類背景色，包括漸變色。同時我們也會接觸到一些CSS3的背景屬性。

添加背景色

給元素添加背景的最便捷方式就是使用background屬性或background-color添加一個純色背景。background屬性可以接受顏色和圖片為值，但background-color只接受色值。這些屬性都是有效的，所以你可以根據(jù)自己的偏好還有實際場景選擇：

div {
background-color: #b2b2b2;
}

添加背景色時，有好幾種值供我們使用。和其他顏色屬性一樣，我們可以從關(guān)鍵字值，十六進制值以及RGB,RGBa,HSL和HSLa值中選擇。我們最常用的還是十六進制值，不過有時我們會需要RGBa或者HSLa設(shè)置透明的背景。

透明背景

因為不是所有瀏覽器都兼容RGBa和HSLa，所以推薦在使用它們的時候設(shè)置一個備用色。Internet Explorer 8 就是不兼容RGBa和HSLa的瀏覽器之一。當瀏覽器（如Internet Explorer 8）遇到不能識別的值時就會忽略它。

如果擔心IE8的兼容問題，那么有一個非常簡單的方法添加一個備用色。我們可以利用CSS的從上到下層疊的關(guān)系，設(shè)置兩個background-color屬性。第一個background-color屬性使用“安全的”背景色，例如十六進制值；第二個background-color使用RGBa或者HSLa值。這樣瀏覽器如果可以識別RGBa或HSLa值，就會正確渲染它；如果無法識別，就會渲染它上面的十六進制的色值。

div {
  background-color: #b2b2b2;
  background-color: rgba(0, 0, 0, .3);
}

添加背景圖

除了可以為圖像添加背景色之外，我們也可以為其添加背景圖。背景圖的添加方法與背景色的添加方法類似，不過增加了一些額外的屬性。與添加背景色類似，我們可以用background屬性設(shè)置縮略值，也可以使用background-image屬性直接設(shè)置值。但不管你使用什么屬性，圖片資源必須放置在url()函數(shù)中。

url()函數(shù)的值是背景圖的路徑，與創(chuàng)建超鏈接路徑相似。我們要注意一下文件目錄，確保引用的圖片路徑準確，路徑放置在括號和雙引號之間。

div {
  background-image: url("alert.png");
}

如果我們添加背景圖時只使用url()值可能會出現(xiàn)一些不合需要的情況。默認情況下，圖片會從左上角開始重復(fù)填充元素背景直到填滿元素的背景。所幸我們可以使用background-repeat和background-position屬性控制元素如何填充，是否重復(fù)。

背景圖重復(fù)填充

默認情況下背景圖會橫向和縱向同時重復(fù)填充元素的背景，除非有特別聲明。background-repeat屬性可以用以控制圖片是否重復(fù)填充，以及重復(fù)填充的方向。

div {
  background-image: url("alert.png");
  background-repeat: no-repeat;
}

background-repeat 接受四個值：repeat, repeat-x, repeat-y 和 no-repeat。repeat是默認值，表示圖片會同時在橫向和縱向重復(fù)填充元素背景。

repeat-x表示背景圖橫向重復(fù)填充元素背景，而repeat-y表示背景圖縱向重復(fù)填充元素背景。no-repeat是告訴瀏覽器背景圖只出現(xiàn)一次就夠了，不需要重復(fù)填充。

背景定位

默認情況下，背景圖位于元素的左上角，但我們可以通過background-position屬性精準的控制背景圖相對于該角落的位置。

div {
  background-image: url("alert.png");
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

background-position屬性要求輸入兩個值：橫向偏移量(第一個值)和縱向偏移量(第二個值)。如果只輸入了一個具體值，那么這個值將應(yīng)用于橫向偏移，縱向偏移量會默認為50%。

因為我們是相對于左上角設(shè)置背景圖偏移，所以長度值與該角息息相關(guān)。

我們可以使用關(guān)鍵字值top，right，bottom，left和center，或者以像素、百分比等長度單位設(shè)置background-position值。

關(guān)鍵字值和百分比非常相似。例如關(guān)鍵字值left top對應(yīng)百分比值0 0，表示背景圖位于元素的左上角。而關(guān)鍵字值right bottom對應(yīng)百分比值100% 100%，表示背景圖位于元素的右下角。

使用像素值也非常的常見，因為像素值可以精確的控制背景圖顯示的位置。

背景圖簡寫值

background-color， background-image，background-position和background-repeat屬性可以揉成一個背景屬性值。這些值的順序有多種，不過最常用的順序是background-color，background-image，background-position最后為background-repeat

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}

背景圖示例

接下來的例子中，我們將使用background屬性，設(shè)置一個包含background-color，background-image，background-position和background-repeat值的簡寫值。

可以注意到例子中background-position屬性有一個相對值和一個絕對值，第一個值20px設(shè)置的是橫向偏移量，表示背景圖在元素內(nèi)向右偏移20像素。第二個值50%是一個縱向偏移量，表示背景圖在元素內(nèi)縱向居中

notice-success選擇器中也設(shè)置了一些其他的樣式以進一步美化警報消息的樣式。

HTML

  Woo hoo! Congratulations, you did it!

CSS

.notice-success {
  background: #67b11c url("tick.png") 20px 50% no-repeat;
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;
}

練習

回到我們的“樣式討論會”網(wǎng)站，讓我們?yōu)槠涮砑右恍┍尘吧Ｔ诖似陂g，我們將修改一些樣式以保持樣式和內(nèi)容清晰美觀。

首先我們在現(xiàn)有的color和font屬性下為元素增加一個藍色背景。修改后樣式如下所示：

body {
  background: #293f50;
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

現(xiàn)在我們已為添加了藍色背景。雖然我們還會為網(wǎng)站添加一些不同的背景色，但藍色是其主色調(diào)。

目前網(wǎng)站的每個頁面都擁有了藍色背景，現(xiàn)在我們需要調(diào)整一些區(qū)域的樣式以保證藍色背景下內(nèi)容清晰可見。具體來說，我們的

和