background屬性總結，background-image路徑問題相對於css和js

（1）background屬性總結

background 簡寫屬性在一個聲明中設置全部的背景屬性。

能夠設置以下屬性：
background-color規定要使用的背景顏色。
background-position規定背景圖像的位置。
background-size規定背景圖片的尺寸。
background-repeat規定如何重複背景圖像。
background-origin規定背景圖片的定位區域。

background-origin: padding-box|border-box|content-box;邊框盒、內邊距框、內容框。

background-clip規定背景的繪製區域。

background-clip: border-box|padding-box|content-box;邊框盒、內邊距框、內容框。

background-attachment規定背景圖像是否固定或者隨着頁面的其他部分滾動。
background-image規定要使用的背景圖像。

若是不設置其中的某個值，也不會出問題建議使用複合屬性，: #00FF00 url(bgimage.gif) no-repeat fixed top;在一個聲明中設置全部的背景屬性。而不是分別使用單個屬性，由於這個屬性在較老的瀏覽器中可以獲得更好的支持，並且須要鍵入的字母也更少。
（2）background-image屬性圖片的相對路徑圖片路徑問題background

圖片路徑能夠是絕對路徑、根相對路徑和文檔相對路徑

絕對路徑是包括服務器協議的徹底路徑，好比「百度主頁」，徹底路徑爲：http://www.baidu.com/index.htm，若是所要連接當前站點以外的文檔，就必須使用絕對路徑。

相對路徑包括根相對路徑（Site Root）和文檔相對路徑（Document）兩種。

根相對路徑（也稱相對跟目錄）的路徑以「/」開頭，路徑是從當前站點的根目錄開始計算。

文檔相對路徑就是指包含當前文檔的文件夾，也就是以當前網頁所在文件夾爲基礎開始計算路徑。
background-image屬性主要用來設置或檢索對象的背景圖像，其值有none和url，none表示無背景圖像，url爲背景圖像的地址，url能夠用相對地值或絕對地址
.bg {background-image: url(images/abc.gif);}
.bg {background-image: url(http://www.mzwu.com/images/abc.gif);}

當使用相對地址時，相對地址和css是內聯仍是外聯是有關係的,
注意：相對路徑的時候，在css和js中引用圖片的相對路徑的基準是不同的。在css中出現的相對路徑，是以css文件所在路徑爲基準的，而js中的路徑則是以導入此js的網頁文件所在的位置爲基準的。

因此在css中當使用內聯css時，相對地址爲圖像相對於htm文件的地址；當使用外聯css時，相對地址應爲圖像相對於css文件的地址！

eg:

index.html
images/n.png
style/css.css
當使用內聯方式時，用background-image設置index.htm中的對象的背景圖像代碼爲：
<style type="text/css">
.bg {background-image: url(images/n.png);}
</style>
.bg {background-image: url(images/n.png);}移到css.css文件中，改用外聯的方式調用：
<link href="style/css.css" rel="stylesheet" type="text/css" />
必須改成.bg {background-image: url(../images/n.png);}
css.css內容.bg {background-image: url(images/n.png);}並移到images文件夾下，修改外聯css地址再作測試：
.bg {background-image: url(n.png);}

 再舉個例子：eg:

/index.html

/js/app.js

/css/style.css

/images/bk1.jpg、bk2.jpg
style.css代碼
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
url(../images/bk.jpg)路徑是相對於style.css的。
app.js代碼
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
url(images/bk2.jpg)路徑是相對於index.html的，而不是app.js的url(../images/bk.jpg)。