如何設置CSS的背景圖片和顏色

一、背景圖片設置大小Css

CSS提供了多種方式來設置背景圖片以及圖片的大小，下面將列舉其中的幾種方式。

1. background-image屬性

CSS通過background-image屬性來設置背景圖片，如下所示：

body {
  background-image: url("/images/background.jpg");
}

其中，url(“/images/background.jpg”)為背景圖片的路徑。

2. background-size屬性

CSS通過background-size屬性來設置背景圖片的大小，如下所示：

body {
  background-image: url("/images/background.jpg");
  background-size: cover;
}

其中，cover為背景圖片的大小類型，它會將背景圖片等比例放大或縮小，在保持圖片比例的前提下，儘可能覆蓋整個容器。

3. background-repeat屬性

CSS通過background-repeat屬性來設置背景圖片不重複或重複顯示，如下所示：

/* 不重複顯示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: no-repeat;
}

/* 垂直重複顯示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat-y;
}

/* 水平重複顯示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat-x;
}

/* 水平垂直都重複顯示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat;
}

其中，no-repeat表示不重複顯示，repeat-y表示垂直重複顯示，repeat-x表示水平重複顯示，repeat表示水平垂直都重複顯示。

二、背景顏色設置Css

CSS提供了多種方式來設置背景顏色，下面將列舉其中的幾種方式。

1. background-color屬性

CSS通過background-color屬性來設置背景顏色，如下所示：

body {
  background-color: #f6f6f6;
}

其中，#f6f6f6為背景顏色的值，可以使用十六進制、RGB值、顏色名稱等來表示顏色。

2. background屬性

CSS通過background屬性來設置背景顏色，它可以一次性設置背景顏色、圖片、大小等多個屬性，如下所示：

body {
  background: #f6f6f6 url("/images/background.jpg") no-repeat center center fixed;
}

其中，#f6f6f6為背景顏色的值，url(“/images/background.jpg”)為背景圖片的路徑，no-repeat表示不重複顯示，center center表示水平垂直居中顯示，fixed表示背景圖片隨滾動條滾動。

三、小結

本文介紹了CSS如何設置背景圖片和顏色，內容涵蓋了背景圖片的大小設置、顏色的設置、以及通過background屬性一次性設置多個屬性等。