继承元素中的背景和背景位置

Question

我有很多 span 类型的元素，我希望每个元素都有相同的背景图像，但这个背景图像的起始位置不同。

HTML

<span class="a1"></span>
<span class="a2"></span>

这个CSS有效（JSFiddle示例：http://jsfiddle.net/knxag5fy）：

span {display: inline-block}
.a1 {background: url('back.png') no-repeat; background-position: -12px -2px; width: 9px; height: 10px}
.a2 {background: url('back.png') no-repeat; background-position: -8px -14px; width: 9px; height: 15px}

我想以这种方式缩短它（JSFiddle示例：http://jsfiddle.net/x48jjumm）：

span {display: inline-block; background: url('back.png') no-repeat}
.a1 {background-position: -12px -2px; width: 9px; height: 10px}
.a2 {background-position: -8px -14px; width: 9px; height: 15px}

但这种方式不起作用（背景位置无效）。我该怎么办呢？