使用background-image在CSS中添加背景圖片

一、CSS中的background-image屬性

在CSS中，可以通過background-image屬性來設置元素的背景圖片。具體使用方法如下：

    background-image: url(圖片路徑);

通過這個屬性，我們可以為元素添加一張圖片作為背景。圖片路徑可以是絕對路徑或相對路徑。如果是相對路徑，相對於CSS樣式文件所在目錄。

二、如何選擇合適的背景圖片

在選擇背景圖片時，需要根據實際需求來決定。以下幾點需要注意：

1. 圖片尺寸要合適。如果圖片尺寸過小，會出現失真、模糊等問題。如果圖片尺寸過大，會增加網頁載入時間，影響用戶體驗。

2. 圖片格式要正確。通常使用JPEG和PNG格式的圖片作為網頁背景圖片。JPEG格式的圖片適用於顏色豐富的圖片，而PNG格式的圖片適用於透明或半透明的背景圖。

3. 圖片內容要符合網頁主題。需要確保圖片的內容與網頁的主題相符合，否則會影響視覺效果。

三、使用background-size屬性調整背景圖片大小

使用background-size屬性可以調整背景圖片的大小。屬性值可以為長度、百分比和cover、contain。

1. 值為長度或百分比時，可以指定背景圖片的寬度和高度。例如：

    background-size: 100px 50px;   /* 指定背景圖片寬度為100px，高度為50px */
    background-size: 50% 100%;     /* 指定背景圖片寬度為元素寬度的50%，高度為元素高度的100% */

2. 值為cover時，可以讓背景圖片充滿整個元素，可能會裁剪圖片。例如：

    background-size: cover;   /* 背景圖片充滿整個元素 */

3. 值為contain時，可以讓背景圖片完整顯示在元素內部，可能會出現空白部分。例如：

    background-size: contain;   /* 背景圖片完整顯示在元素內部 */

四、使用background-position屬性調整背景圖片位置

使用background-position屬性可以調整背景圖片的位置。屬性值可以為長度、百分比和關鍵字。

1. 值為長度或百分比時，可以指定背景圖片相對於元素的左上角位置。例如：

    background-position: 10px 20px;   /* 背景圖片距離元素左邊緣10px，距離上邊緣20px */
    background-position: 50% 50%;     /* 背景圖片居中顯示 */

2. 值為關鍵字時，可以讓背景圖片在元素內部進行定位。例如：

    background-position: top left;        /* 背景圖片在元素左上角 */
    background-position: center center;   /* 背景圖片居中顯示 */
    background-position: bottom right;    /* 背景圖片在元素右下角 */

五、使用background-repeat屬性平鋪背景圖片

默認情況下，背景圖片會重複平鋪到整個元素區域。如果不想平鋪，可以使用background-repeat屬性。屬性值可以為no-repeat。

    background-repeat: no-repeat;   /* 背景圖片不平鋪 */

六、完整的背景圖片CSS示例代碼

    /* 單個背景圖片 */
    .example1 {
        background-image: url(../img/bg.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 多個背景圖片 */
    .example2 {
        background-image: url(../img/bg1.jpg), url(../img/bg2.jpg);
        background-size: 50%, cover;
        background-position: left top, center center;
        background-repeat: no-repeat, repeat-y;
    }

例如，上述代碼中，.example1類使用單個背景圖片，並將背景圖片設置為居中且不平鋪。.example2類使用兩個背景圖片，並將第一個背景圖片位置設為左上角，第二個背景圖片位置設為居中，且第一個背景圖片只重複一次，第二個背景圖片縱向平鋪。