CSS背景圖的設(shè)置距離相信很多網(wǎng)站制作者都會遇到這樣的問題。當(dāng)我們在實(shí)際應(yīng)用中，經(jīng)常會遇到需要給背景圖設(shè)置一定的距離，這就要涉及到CSS中的background-position屬性。下面就讓我們一起來學(xué)習(xí)一下這個屬性怎么使用吧！

樣式代碼如下：
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;

上面的代碼是為了設(shè)置一個完整的背景圖樣式，其中background-position是我們今天要講解的一個屬性。這個屬性表示背景圖相對于元素的位置，可以設(shè)置為像素值、百分比值、關(guān)鍵字值等等。以下是具體的設(shè)置方式：

1、使用像素值設(shè)置距離
background-position:10px 20px;
2、使用百分比值設(shè)置距離
background-position:10% 20%;
3、使用關(guān)鍵字值設(shè)置距離
background-position:left top;
background-position:center center;
background-position:right bottom;

值得一提的是，當(dāng)設(shè)置關(guān)鍵字值時，如果只寫一個值，則另一個值默認(rèn)為50%。比如，當(dāng)設(shè)置為“l(fā)eft”時，其實(shí)是相當(dāng)于“l(fā)eft 50%”，表示背景圖左側(cè)與元素中線對齊。

最后，我們需要特別注意的是，如果設(shè)置了background-attachment:fixed屬性，則背景圖將會固定在元素的指定位置，不會隨著頁面滾動而移動。實(shí)際應(yīng)用中，我們需要根據(jù)不同的需求來進(jìn)行靈活的設(shè)置。