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