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

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

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

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

添加背景色

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

div {
background-color: #b2b2b2;
}

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

透明背景

因?yàn)椴皇撬袨g覽器都兼容RGBa和HSLa，所以推薦在使用它們的時(shí)候設(shè)置一個(gè)備用色。Internet Explorer 8 就是不兼容RGBa和HSLa的瀏覽器之一。當(dāng)瀏覽器（如Internet Explorer 8）遇到不能識別的值時(shí)就會忽略它。

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

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

添加背景圖

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

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

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

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

背景圖重復(fù)填充

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

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

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

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

背景定位

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

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

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

因?yàn)槲覀兪窍鄬τ谧笊辖窃O(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%，表示背景圖位于元素的右下角。

使用像素值也非常的常見，因?yàn)橄袼刂悼梢跃_的控制背景圖顯示的位置。

背景圖簡寫值

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

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

背景圖示例

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

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

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

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;
}

練習(xí)

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

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

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

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

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

和