先说一下 background-position
的表现:
-
当使用关键字的时候,关键字的顺序是无关的,即:
background-position: center top
和background-postion: top center
是等价的 -
当使用百分比或者具体的长度单位时,是先
x
方向,后y
方向,顺序不能错,即:background-position: 10px 20px
和background-position: 20px 10px
表示的不一样 -
在新的 CSS 语法中又多了一种用法,这种用法是相对于容器的边,形式如下:
background-position: right 10px top 20px
,这种语法表示背景距右边10px
,距上边20px
。
OK,根据你的问题,第三种情况应该可以满足你的需求,但是,这种写法的兼容性并不好,很多浏览器还不支持。如果不考虑 IE8,可以采用这种方式。如果要考虑 IE8 的话,要么给容器定宽,计算出具体的 x
和 y
的值,要么,使用百分比来大约的定位。