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