本文目錄導讀：

1. 背景顏色的設置
2. 背景圖片的設置
3. 背景圖片的位置
4. 背景圖片的重復
5. 背景樣式的簡寫形式

CSS樣式中背景樣式的應用

背景顏色的設置

在CSS樣式中，我們可以使用background-color屬性來設置元素的背景顏色，如果你想設置一個元素的背景顏色為藍色，你可以這樣寫：

div {
  background-color: blue;
}

背景圖片的設置

除了背景顏色，我們還可以為元素設置背景圖片，這可以通過background-image屬性來實現(xiàn)。

div {
  background-image: url('image.jpg');
}

在這個例子中，我們?yōu)閐iv元素設置了一個名為'image.jpg'的背景圖片。

背景圖片的位置

我們可以使用background-position屬性來設置背景圖片的位置，如果你想讓背景圖片居中顯示，你可以這樣寫：

div {
  background-image: url('image.jpg');
  background-position: center;
}

背景圖片的重復

我們還可以控制背景圖片是否重復以及如何重復，這可以通過background-repeat屬性來實現(xiàn)，如果你想讓背景圖片不重復，你可以這樣寫：

div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}

背景樣式的簡寫形式

為了簡化代碼，我們可以將上述所有背景樣式屬性合并到一個屬性中，這就是所謂的背景樣式的簡寫形式。

div {
  background: blue url('image.jpg') center no-repeat;
}

在這個例子中，我們設置了背景顏色為藍色，背景圖片為'image.jpg'，并且圖片位置居中，不重復，這樣的寫法既簡潔又方便。