为什么CSS3右对齐背景图片出现在错误的位置？

Question

我正在使用CSS3 background-position将背景图像从容器的右边缘定位3％。然而，它与其他位置相比，如果我有一个97％宽的等效容器，背景图像右对齐。您可以在http://jsfiddle.net/deshg/9qveqdcu/2/看到我的意思，黑色行中的徽标比绿色行中的徽标更靠右边但是它们肯定应该处于相同的水平位置？

如果有人能够阐明为什么会发生这种情况，那将会受到大力赞赏。

供参考，代码如下。

全部谢谢！

#container {
width: 100%;
background-color: #ffcc00;
}

#d1 {
background-color: #cccc00;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right 3% center;
background-repeat: no-repeat;
width: 100%;
}

#d2 {
background-color: #000000;
color: #ffffff;
background-image: url('http://jsfiddle.net/img/logo.png');
background-position: right center;
background-repeat: no-repeat;
width: 97%;
margin-right: 3%;
}

<div id="container">
    <div id="d1">
        abvc
    </div>
    <div id="d2">
        def
    </div>
</div>

Answer 1

背景图片本身正在偏移其自身宽度的3％

From the docs：

  

百分比是指背景定位区域的大小减去   背景图像的大小; size是指水平宽度   偏移和垂直偏移的高度

以下是使用25％25％（from CSS Tricks）时的插图：

Answer 2

背景位置无法正常运作。

与你说比如果你在left: 50%;处有一个并将其定位在那个场景中的情况不同，图像的左边缘将处于中间点。如果你想将它居中，你需要将它拉回到左侧（负平移或负边距）

为了更好地理解，请参考Link和Link

对于你想要达到的目标，你必须设置

background-position: 96% 0px, center center;

Fiddle