记录background-position的使用方法

开发时遇到了一个样式
箭头要距离右边10像素，但是之前只用过background-position: right center;这种，不能满足需求。

除了使用::after/before伪类定位到这个样子，还有什么方法呢？

经查询后，得知，原来background-position还可以这么写

.a {
	background-position: top 10px right 10px;
	background-position: bottom 10px left 10px;
}

这个的意思就是，距离某一边多少距离，完美契合我的需求。

但是，这种写法的兼容性并不好，很多浏览器还不支持。如果不考虑 IE8，可以采用这种方式。如果要考虑 IE8 的话，要么给容器定宽，计算出具体的 x 和 y 的值，要么，使用百分比来大约的定位。

注意：
background-position 如果要写10px 10px的话，第一个值是x轴距离左边的距离，第二个是y轴距离顶部的距离。

center 10px 表示：x轴居中，距离top 10像素
center； 表示上下左右都居中

center 10px center 10px是不能使用的！这是一个错误的语法。