background-position:x y
其中x与y分为方位名词与精确单位两种
首先是方位名词,主要有top/bottom/left/right/center
小测试:
问题一:使用方位名词,背景图是怎么移动位置的?
background-position:top center与background-position:center top
因此,对于方位名词,center top === top center
其实是这样的,background-position有两个属性,一个是x,一个是y
那么在x轴方位名词其实只有center,left,right可以使用,y轴可以使用的是top/bottom/center
所以center top是指x轴上是居中,y轴上是最上,top center也是指y轴上是最上,x轴上是居中
同理,background-position:top bottom,你说图片怎么移动,答案是保持默认的按照背景的左上方对齐,不移动位置,因为top也是指y轴,bottom也是指y轴,等于没有移动位置。
问题二:对于这种超大的背景图,小盒子里面放这种超大的背景图,是在移动背景图的位置,那么对于小背景图怎么办,在盒子当中是怎么移动位置的那?
默认是重复,这里设置为不重复
加一个颜色,方便看,对于小背景图,默认是沿着盒子左上方排,
设置为top center看一下效果
设置为bottom center,就应该在最下面,然后去中间
总结:不论是超大图还是小图都是在移动背景图的位置。