background-position 这个属性相信做过前端的都不会太陌生,尤其是在使用 CSS Sprite 的时候。但是一直以来,它都有一个缺陷——只能相对于容器的左边和上边来定位。这使得很多需求处理起来很 trick。比如,我想让图标定位到容器的左上角,距离上边和右边各 10px。如何实现这种效果呢?

通常情况下,如果容器是定宽的话,我们可以具体的设置 background-positionxy 来绝对的定位背景图片的位置。但是如果不定宽话,就稍微麻烦一些,这时我们可能会选择用百分比来大约的定位背景图片的位置,但是不怎么精确,另一种方式就要借助于 JS 计算了:(。

好消息是 CSS 终于对这个属性添加了新的语法功能,使得它可以相对于容器的四个边来定位。具体的方法如下所示:

background-position: right 10px top 10px;

表示背景图片要距离右边 10px,距离上边 10px,完美得实现了我们开始提出的需求!同样的你可以相对于 left 和 bottom 来定位。

由于是新语法,它的兼容性并不是特别的好,你可以在 Android4.4 及以上版本,IE9 及以上版本中放心的使用这种用法。

此外,还有一种实现的方式,那就是使用 calc() 函数来实现,具体如下:

background-position: calc(100% - 10px) 10px;

这种方法的兼容性和上面的一样,但实现起来略显 trick,差评。