CSS設置背景圖片技巧詳解

一、使用css background-image屬性設置背景圖片

CSS的background-image屬性可以用來設置HTML元素的背景圖片，該屬性值可以是圖像的URL，也可以是線性或徑向漸變，可以按照以下方式設置背景圖片：

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

其中，.example為指定的CSS class，將會應用到HTML元素中。

默認情況下，背景圖片將會根據元素的寬度及高度進行縮放並平鋪，如果圖片大小不夠，則會複製多個圖片進行平鋪，即重複背景圖像直到裝滿整個元素的區域。如果背景圖片的大小超出部分則會被裁切。需要特別注意的是，若元素未設置寬高，將無法正常顯示背景圖片。

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

CSS的background-size屬性可以設置背景圖片的大小，可以按照以下方式設置：

    
    .example {
        background-image: url('xxxxx.jpg');
        background-size: cover;
    }
    

其中，cover參數表示圖片儘可能足夠大以覆蓋整個元素（背景圖片的某些部分可能會被裁剪），還可以設置使用contain參數來保留整張背景圖片，其餘部分可能會被填充以適應元素大小。同時，還可以使用其他的單位來具體指定背景圖片的大小，如背景圖片寬度與元素寬度相同，高度為auto等。

三、使用CSS background-position屬性控制背景圖片位置

background-position屬性可以控制元素內背景圖片的位置，原點在元素左上角，可以使用下列值進行設置，如：

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

以上設置將把背景圖片的中心對齊到元素的中心處，也可以使用像素等單位進行指定具體的位置，如background-position:10px 20px。

四、使用CSS多重背景實現多張背景圖片的顯示

通過CSS3的多重背景圖像特性，可以實現多張背景圖片的顯示，與其它屬性設置類似，再次添加一條background-image樣式屬性即可，如下：

    
    .example {
        background-image: url("xxxxx.png"), url("yyyyy.jpg");
        background-position: left top, right bottom;
        background-repeat: no-repeat;
    }
    

上述代碼將會添加一個png格式的前景背景圖片以及一個jpeg格式的背景圖片，前景背景圖片位於左上方，而後景背景圖片位於右下方。

五、使用CSS3漸變背景實現高級效果

除了使用圖片來設置背景，CSS3還提供了gradient函數可以用來創建線性漸變、徑向漸變等多種漸變效果。下面是一個簡單的CSS3背景漸變效果示例：

    
    .example {
        background: linear-gradient(to right, #ff0000, #0000ff);
    }
    

上述代碼創建了一個從左到右的紅色和藍色漸變，可以使用不同的漸變方向和色彩組合來實現更加豐富多樣的背景效果。

總結

本文介紹了使用CSS設置背景圖片的多種常用技巧，包括設置背景圖片，調整背景圖片大小，控制背景圖片位置，製作多重背景圖片和使用CSS3漸變背景。這些技巧在Web前端開發中都非常實用，同時也可以用來製作一些有趣的背景效果來增強網頁視覺效果。