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

我正在使用 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>

解决方法

背景图像本身偏移了自身宽度的3％

From the docs：

Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets

这是使用25％25％(from CSS Tricks)时的插图：