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

Posted 2023-05-08

【中文标题】为啥 CSS3 右对齐背景图片出现在错误的位置？

【英文标题】：Why does CSS3 right aligned background image appear in the wrong place?为什么 CSS3 右对齐背景图片出现在错误的位置？

【发布时间】：2015-08-10 20:44:34

【问题描述】：

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

【问题讨论】：

好问题，好像有 1% 的折扣

【参考方案1】：

背景图片本身偏移了其自身宽度的 3%

From the docs:

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

这是使用 25% 25% (from CSS Tricks) 时的示例：

【讨论】：

我在#d1 上找到background-position: right 4% center; 对齐它们

@GeorgeLee 或设置#d1 width: 99.5%; ;)

啊，好的，谢谢@Alex，这很有意义（尽管这样做似乎很奇怪！）使用 4% 或 99.5% 的问题是它具有响应性，因此这不适用于所有尺寸。您知道有什么方法可以准确地将背景图像从右边缘按百分比对齐，因为这似乎是一个奇怪的遗漏？谢谢！

@deshg 很抱歉，似乎没有 CSS 方法。我看到了一个 background-origin 属性，我希望它可以工作，但这是针对稍微不同的情况。

@Alex 是的，这是我必须使用的方法，我只是想避免它以保持标记尽可能干净，但看起来这是唯一的方法

【参考方案2】：

背景位置与您想的不一样。

在那种情况下，如果您有一个并将其定位在left: 50%;，这与图像的左边缘将位于中间点不同。如果要居中，则需要将其拉回左侧（负平移或负边距）

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

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

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

Fiddle

【讨论】：

谢谢@ketan，问题在于它的响应性，所以如果你对这样的值进行硬编码，那么它在大多数尺寸下都会变得不合时宜。似乎很奇怪，没有办法使用 CSS3 中的百分比正确对齐它:(

@deshg 是的，你说得对，它类似于硬编码。 :(