background-position为何不支持 center 与 百分比如（50%）

[DeyuanTan]

background: url('pic/abc.png?__sprite') no-repeat 50% 10px; 这样是不生效的。产出后 background-position:0 0;

[Leega0]

同疑问，而且background-size 用scal缩小后，position的数值也要缩小，release前的要手动放大到不合适的尺寸，没有针对移动端做过优化吗

[fouber]

@DeyuanTan

background-position中百分比是没办法支持的，因为使用百分比是按照父元素的尺寸来计算的，那么在合并的时候，由于不知道最终css的父级元素的尺寸是多少，所以不知道这个图片与其他图片合并的时候，周围要留出多少空白才能实现正确定位。

假设你的position是百分比的，比如：

.bg {
  background-image: url(logo.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100px;
}

.bg {
  width: 100px;
  height:100px;
  border: 1px solid red;
}

父级元素尺寸是 100x100

父级元素尺寸是 200x200

如上图所示，当父级元素尺寸不同时，csssprite需要留出足够多的空白使得展现能够正确，但是在构建的过程中，是绝对不可能算出来csssprite所处理的元素最终其父级元素的尺寸的，所以布局算法将失效，这就是不能使用百分比的原因。

csssprite是一个比较复杂的计算过程，要么配置繁琐可以让优化进一步提升，要么只解决60%~70%的合并问题，让配置尽量精简。fis选择了后者。