background-image用法詳解

一、background-image怎麼用

在CSS中，background-image用於設置元素的背景圖像。它可以將一張或多張圖像設置為元素的背景，同時支持設置圖片的位置、尺寸、重複等屬性。其中，background-image的取值可以是多張圖像組成的列表，也可以是單張圖像的URL。

下面是一些常見的background-image使用方式：

/*設置單張背景圖像*/
div {
    background-image: url("background.jpg");
}
/*設置多張背景圖像*/
div {
    background-image: url("background1.jpg"), url("background2.jpg");
}
/*設置背景圖像並設置位置*/
div {
    background-image: url("background.jpg");
    background-position: center;
}

二、background-image取值選取

background-image的取值可以是單個URL，也可以是多個URL組成的列表。下面分別介紹一些常用的取值方式。

1. 使用單個URL

使用單個URL是最常見的方式，可以將一張圖片設置為元素的背景。

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

2. 使用多個URL

使用多個URL可以將多張圖片合併成一個元素的背景。需要注意的是，圖片的順序將決定它們在元素中的疊放順序。

div {
  background-image: url("background1.jpg"), url("background2.jpg");
}

3. 使用線性漸變

使用線性漸變可以設置一個由兩種或多種顏色漸變而成的背景。這種方式可以非常靈活地控制漸變的方向、起點、終點等屬性。

div {
  background-image: linear-gradient(to bottom, #ffffff, #000000);
}

4. 使用徑向漸變

使用徑向漸變可以設置一個由中心向四周逐漸擴散的背景，也可以控制漸變的大小、形狀等屬性。

div {
  background-image: radial-gradient(circle, #ffffff, #000000);
}

5. 使用CSS Sprites

CSS Sprites是指將多個圖像合併成一張單獨的圖像，然後通過background-position屬性將需要的部分顯示出來。這樣做可以減少HTTP請求次數，提高頁面載入速度。

div {
  background-image: url("sprites.jpg");
  background-position: -50px -50px;
}

三、如何搭配其他屬性使用

除了background-image屬性以外，CSS中還有一些與背景相關的屬性，它們可以幫助我們更加靈活地控制元素的背景效果。

1. background-repeat

background-repeat用於指定背景圖像的重複方式。它有以下取值：

• repeat：默認值，圖像在水平和垂直方向上重複
• repeat-x：圖像在水平方向上重複
• repeat-y：圖像在垂直方向上重複
• no-repeat：圖像不重複

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

2. background-position

background-position用於指定背景圖像在元素中的位置。它有以下取值：

• length：表示以長度為單位的偏移量。例如，10px表示偏移10像素
• percentage：表示以百分比為單位的偏移量。例如，50%表示偏移元素的中心點位置
• top、bottom、left、right：表示偏移元素的頂部、底部、左側、右側位置
• center：表示偏移元素的中心點位置

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

3. background-size

background-size用於指定背景圖像的尺寸。它有以下取值：

• auto：默認值，圖像按照原始尺寸顯示
• cover：圖像調整比例，填充整個元素
• contain：圖像調整比例，完整展示在元素內
• length：表示以長度為單位的尺寸
• percentage：表示以百分比為單位的尺寸

div {
  background-image: url("background.jpg");
  background-size: cover;
}

4. background-attachment

background-attachment用於指定背景圖像的滾動方式。它有以下取值：

• scroll：默認值，背景圖像隨著元素的滾動而滾動
• fixed：背景圖像固定在頁面上，不隨元素滾動
• local：背景圖像隨著元素內部的滾動而滾動

div {
  background-image: url("background.jpg");
  background-attachment: fixed;
}