background-position使用需要注意的地方

background-position有三种表现的形式。

(1) top left (默认情况)     

top center
top right
center left

center center

center right

bottom left
bottom center

bottom right

是这样理解的，图片分三层。top,center,bottom。
top后面又有left,center,right，分别表示top层的最左边，最中间和最右边。
center后面又有left,center,right,分别表示center层的最左边，最中间和最右边。
bottom后面又有left,center,right,分别表示bottom层的最左边，最中间和最右边。

(2) 用百分比进行表示。

x% y%： x表示水平距离，y%表示垂直距离。

(3) 用px表示
‘x’px ‘y’px:  x表示水平距离，y表示垂直距离
-------------------------------------------------------------------------------------
使用backgroun-position要注意的情况

例如图片的原始大小为300px * 400px。

(1)如果容器div给的宽度是400px，高度也比img的高度大。

图片会在按照div的宽度正常进行background-position。
如果容器给的高度比img的高度小，则图片就会自自动截取到容器给的高度处。

(2)如果容器div给的宽度是200px，不管高度如何变化，图片会自动截取到容器给的高度处。

   如果background-position：top center
那么显示的图片就会显示“正常图片的top center处”       

(3) background: a b c;

a表示:background-image

b表示background-repeat

c表示background-position 

转载于:https://www.cnblogs.com/xingzoudecd/p/8504912.html