为什么 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:

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) 时的示例：

Answer 2

背景位置不是你想的那样。

这与在那种情况下将其放置在 left: 50%; 不同，图像的左边缘将位于中间点。如果你想让它居中，你需要把它拉回左边（负平移或负边距）

为了更好地理解，请参阅 Link And Link

对于你想要实现的目标，你必须设置

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

Fiddle

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

Why does CSS3 right aligned background image appear in the wrong place?

html

css

background-image

background-position