先说一下 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 的值，要么，使用百分比来大约的定位。

版权声明：本文为ghfjj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ghfjj/p/6727435.html