給網(wǎng)頁添加背景色
CSS允許我們?yōu)榫W(wǎng)頁元素設(shè)置背景色，可以使用`background-color`屬性來實(shí)現(xiàn)。這個(gè)屬性可以接受任何合法的顏色值。例如，下面的規(guī)則將一個(gè)段落的背景設(shè)置為灰色：```p { backgro
CSS允許我們?yōu)榫W(wǎng)頁元素設(shè)置背景色，可以使用`background-color`屬性來實(shí)現(xiàn)。這個(gè)屬性可以接受任何合法的顏色值。例如，下面的規(guī)則將一個(gè)段落的背景設(shè)置為灰色：
```
p {
background-color: gray;
}
```
如果希望背景色從元素中的文本向外延伸一些，只需增加一些內(nèi)邊距即可：
```
p {
background-color: gray;
padding: 20px;
}
```
我們甚至可以為所有元素設(shè)置背景色，包括`body`、`em`和行內(nèi)元素`a`。
給網(wǎng)頁添加背景圖像
如果想要在網(wǎng)頁背景中放置一張圖像，可以使用`background-image`屬性。默認(rèn)情況下，`background-image`屬性的值是`none`，表示沒有設(shè)置任何背景圖像。如果需要設(shè)置背景圖像，必須為該屬性提供一個(gè)URL值。例如，下面的規(guī)則將`body`元素的背景圖像設(shè)置為一個(gè)URL鏈接指向的圖像：
```
body {
background-image: url(/i/eg_bg_);
}
```
大多數(shù)時(shí)候，我們將背景應(yīng)用到`body`元素上，但也可以將背景應(yīng)用到其他元素上。例如，下面的規(guī)則為一個(gè)段落應(yīng)用了一個(gè)背景圖像，而不會(huì)對(duì)文檔的其他部分應(yīng)用背景：
```
p.flower {
background-image: url(/i/eg_bg_);
}
```
我們甚至可以為行內(nèi)元素設(shè)置背景圖像。例如，下面的規(guī)則為一個(gè)鏈接設(shè)置了背景圖像：
```
{
background-image: url(/i/eg_bg_);
}
```
控制背景圖像的重復(fù)
如果需要在頁面上平鋪背景圖像，可以使用`background-repeat`屬性。屬性值`repeat`表示圖像在水平和垂直方向上都進(jìn)行平鋪，與以往的背景圖像默認(rèn)行為相同。`repeat-x`和`repeat-y`分別表示圖像只在水平或垂直方向上重復(fù)，`no-repeat`表示不允許圖像在任何方向上平鋪。例如，下面的規(guī)則將`body`元素的背景圖像在垂直方向上進(jìn)行平鋪：
```
body {
background-image: url(/i/eg_bg_);
background-repeat: repeat-y;
}
```
調(diào)整背景圖像的位置
我們可以利用`background-position`屬性來改變背景圖像在元素中的位置。例如，下面的規(guī)則將`body`元素的背景圖像居中放置：
```
body {
background-image:url('/i/eg_bg_');
background-repeat:no-repeat;
background-position:center;
}
```
`background-position`屬性可以接受多種值。我們可以使用關(guān)鍵字如`top`、`bottom`、`left`、`right`和`center`，這些關(guān)鍵字通常是成對(duì)出現(xiàn)的，但并不總是必須成對(duì)。我們還可以使用長度值，如`100px`或`5cm`，以及百分?jǐn)?shù)值。不同類型的值對(duì)于背景圖像的放置會(huì)稍有差異。
防止背景圖像滾動(dòng)
當(dāng)文檔比較長時(shí)，當(dāng)頁面向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。如果希望背景圖像固定不動(dòng)，可以使用`background-attachment`屬性來實(shí)現(xiàn)。通過將該屬性設(shè)置為`fixed`，可以使圖像相對(duì)于可視區(qū)域固定，而不會(huì)受到滾動(dòng)的影響。例如，下面的規(guī)則將`body`元素的背景圖像固定在頁面上：
```
body {
background-image:url(/i/eg_bg_);
background-repeat:no-repeat;
background-attachment:fixed;
}
```
CSS背景屬性
- `background`：這是一個(gè)簡寫屬性，用于在一個(gè)聲明中設(shè)置所有背景屬性。
- `background-attachment`：控制背景圖像是否固定或隨頁面滾動(dòng)。
- `background-color`：設(shè)置元素的背景顏色。
- `background-image`：將圖像設(shè)置為背景。
- `background-position`：設(shè)置背景圖像的起始位置。
- `background-repeat`：設(shè)置背景圖像是否及如何重復(fù)。
以上就是給網(wǎng)頁添加背景色和背景圖像的方法，通過調(diào)整背景圖像的重復(fù)和位置，我們可以創(chuàng)建出獨(dú)特而豐富的頁面背景效果。