先說一下 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
的值,要么,使用百分比來大約的定位。