css控制背景圖片位置-background-position
阿新 • • 發佈：2019-02-02
最近經常給div在加背景圖片的時候，發現背景圖片的位置總是跟自己想要的效果不一樣，所以就粗略的研究了一下，把結果和過程跟大家一起分享一下。現在就用div來舉例子，其他的容器也都一樣。主要來介紹一下背景background的幾個屬性。
我們給一個div加上背景後，先僅僅控制背景圖片的路徑，其他的都不做控制。這時候背景圖片的座標是左上角，如果圖片大小大於div的大小，多出來的部分會被切掉，如果圖片大小小於div的大小，即，背景圖片不能全部覆蓋div，他預設會在橫向和縱向都把圖片進行平鋪，也就是你會看到好幾個背景圖片鋪著，來把div填滿。要取消掉這種效果，使用background-repeat屬性。
下面來繼續看如何控制背景圖片的位置。控制位置使用background-position屬性，這個屬性需要有兩個值，分別來控制水平和垂直方向上的值。
background-position可以取的值有百分數、數值、位置三種。
百分數為任意百分數，例如background-position:50% 50%; 表示在水平和垂直方向是都是劇中的
數值例如background-position:10px 10px;表示以左上角為原點，分別偏移了10px的位置
位置的話，水平方向上是left(靠左),center(居中),right（靠右）;
垂直方向上是top(靠頂),center(居中),bottom(靠底)。
例如:background-position:left bottom;表示背景圖片靠左下角。
這三種數值也可以組合起來
我們給一個div加上背景後，先僅僅控制背景圖片的路徑，其他的都不做控制。這時候背景圖片的座標是左上角，如果圖片大小大於div的大小，多出來的部分會被切掉，如果圖片大小小於div的大小，即，背景圖片不能全部覆蓋div，他預設會在橫向和縱向都把圖片進行平鋪，也就是你會看到好幾個背景圖片鋪著，來把div填滿。要取消掉這種效果，使用background-repeat屬性。
background-repeat 屬性的幾個值：
repeat : 預設值。背景影象在縱向和橫向上平鋪
no-repeat : 背景影象不平鋪
repeat-x : 背景影象僅在橫向上平鋪
repeat-y : 背景影象僅在縱向上平鋪
下面來繼續看如何控制背景圖片的位置。控制位置使用background-position屬性，這個屬性需要有兩個值，分別來控制水平和垂直方向上的值。
background-position可以取的值有百分數、數值、位置三種。
百分數為任意百分數，例如background-position:50% 50%; 表示在水平和垂直方向是都是劇中的
數值例如background-position:10px 10px;表示以左上角為原點，分別偏移了10px的位置
位置的話，水平方向上是left(靠左),center(居中),right（靠右）;
垂直方向上是top(靠頂),center(居中),bottom(靠底)。
例如:background-position:left bottom;表示背景圖片靠左下角。
這三種數值也可以組合起來
background-position:10px center 水平方向上偏移右邊10px，垂直居中
background-position:center 50% 水平垂直都居中
當圖片比div大的時候，background-position控制位置和比div小時控制效果是一樣的。可以通過background-position來控制顯示圖片的哪一部分來作為背景圖片