background

語法：

Object.style.background=background-color background-image
background-repeat background-attachment background-position

參數	描述	值
background-color	設置元素的背景色。	color-name color-rgb color-hex transparent
background-image	設置背景圖像。	url(URL) none
background-repeat	設置背景圖像是否及如何重複。	repeat repeat-x repeat-y no-repeat
background-attachment	背景圖像是否固定或者隨着頁面的其他部分滾動。	scroll fixed
background-position	設置背景圖像的起始位置。	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

語法： background-position : length || length background-position : position || position

取值： length  : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱 長度單位  position  : top | center | bottom | left | center | right
說明： 設置或檢索對象的背景圖像位置。必須先指定 background-image 屬性。 該屬性定位不受對象的補丁屬性( padding )設置影響。 默認值爲： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容區域的左上角。 若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲 50% 。若是指定了兩個值，第二個值將用於縱座標。 若是設置值爲 right center ，由於 right 做爲橫座標值將會覆蓋 center 值，因此背景圖片將被居右定位。 對應的腳本特性爲 backgroundPosition。
注： 本文中使用的圖片大小爲 210px*120px，爲了能很清晰的表達圖形的哪部分被隱藏了，按照圖片的大小平均分紅了9等份。同時背景圖片容器區域繪製出綠色邊框清晰顯示容器的範圍。

一、background-position:0 0;

背景圖片的左上角將與容器元素的左上角對齊。

該設置與background-position:left top;或者background-position:0% 0%;設置的效果是一致的。例如：

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll 0 0;

        border:5px solid green;

    }

效果以下圖1：

                                        圖 1

二、該屬性定位不受對象的補丁屬性( padding )設置影響。

例如，咱們給容器元素增長padding值，背景圖片的左上角仍是與容器元素的左上角對齊。在此處只是影響到了容器元素的高度和寬度。

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll 0 0;

        border:5px solid green;

        padding:50px;

    }

效果如圖2：

                                                   圖 2

三、background-position:-70px -40px;

圖片以容器左上角爲參考向左偏移70px，向上偏移 40px，示例：

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll -70px -40px;

        border:5px solid green;

    }

效果如圖3：

                                  圖 3

四、background-position:70px 40px;

圖片以容器左上角爲參考向右偏移70px，向下偏移 40px，示例：

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll 70px 40px;

        border:5px solid green;

    }

效果如圖4：

                                   圖 4

五、background-position:50% 50%;

圖片水平和垂直居中。

與 background-position:center center;效果等同。

等同於x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。

等同於y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

 例如： .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll 50% 50%;

        border:5px solid green;

    }

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如圖5：

                                     圖 5

因爲超出部分別往兩端延伸，因此咱們能夠先製做一張寬度足夠寬圖片設置水平值爲50%，這樣能夠用來適應不一樣的瀏覽器，使得圖片水平充滿瀏覽器窗口而且居中。替代margin:50 auto的功能。

六、background-position:-50% -50%;

等同於x：-{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。

等同於y：-{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll -50% -50%;

        border:5px solid green;

    }

效果如圖6：

                                     圖 6

七、background-position:100% 100%;

圖片處於容器元素的右下角，與 background-position:right bottom;效果等同。

示例：

    .container{

        width:300px;

        height:150px;

        background:transparent url(bg.jpg) no-repeat scroll 100% 100%;

        border:5px solid green;

    }

效果如圖7：

                                    圖 7