CSS3背景大小和背景位置问题

Posted 2023-05-08

【中文标题】CSS3背景大小和背景位置问题

【英文标题】：CSS3 background-size and background-position issue

【发布时间】：2013-02-09 03:28:15

【问题描述】：

我正在编写一个小的 WP 主题，需要一些关于新 CSS3 background-size 属性的帮助。

我有一个包含图像作为背景的 DIV。图像本身设置为大于 div 以呈现原始图像的小切口：

.imageContainer 
    background-size:154% 102%;
    background-position-x:-28%;
    background-position-y:0.28%;

到目前为止一切都很好。但是如果大小≥ 100%，调用 background-position 属性会变得很棘手。 我整理了一个小 JS/CSS Playground 进行测试：

如果图像的宽度 ≤ 99%，则 background-position-x 越小意味着图像向左移动。 如果图像 == 100% 宽，则 background-position-x 不执行任何操作 如果图像宽度 ≥ 101%，则 background-position-x 越小意味着图像向右。

对于以下情况我计算了：

大容器：350x350px 图片：540x359px 表示：(100/350) * 540 ≙ 154% 宽度 (100/350) * 359 ≙ 102% 高度。 还有：位置-x：-28% 和位置-y：-0.28%

所以我渲染了一个页面（包括自动计算）并且大小大约是正确的大小。 但正如我所说，较少的 background-position-x (-28%) 意味着图像正确，图像位置错误。

它必须向左移动，因为我计算了 -28% 的“左边距”。所以我做了一些试验和错误，结果发现正确的位置应该在 50% 左右。

这仍然是 CSS3 问题，还是我完全误解了这个属性的功能？

编辑： here is an JSFiddle too

这是一张图片来说明我的目标......

【问题讨论】：

如果您可以将jsfiddle.net 与真实图像的链接一起展示问题，这将使我们更容易为您提供帮助。此外，background-position: 0 0 也是有效的语法。 background-postion-x 和 background-postion-y 实际上不是 W3C 规范的一部分，在 Firefox 或 Opera 中不受支持。

你说得对 background-position-x / y。我认为这样阅读会更容易。我正在 Safari 上开发，所以它可以工作。但是当我上网时，我会删除这个语法。所以这是一种生产状态：）我会在几分钟内把小提琴放在一起。

你去jsfiddle.net/FJ3Ub

【参考方案1】：

问题的关键是您指定的百分比给出了容器和图像匹配的点。这个点是在图像和容器中计算的。

因此，如果您希望图像居中，则意味着图像的中心位于容器的中心。因此，这是您通过反复试验找到的值。

这里的关键是 50%，因为背景位置 总是 使图像居中，您不需要任何计算

如果您为属性指定 10%，这意味着图像中距左侧 10% 的点位于容器中距左侧 10% 的点。

这个公式

如何从百分比转换为 px（根据要求）。 假设您有一个大小为 n 的容器，并且图像大了 f 倍您指定的背景位置为 x%。我们将其视为一个单位因子 a 为 a=x*100

容器中要匹配的位置是an。图片中要匹配的位置是afn。图片与容器的位置是差值 afn-an ，可以表示为 an(f-1)。

这就解释了原因：

当 f > 1 时，该属性的明显结果会反转。 （图片比容器大。

f = 1时结果为nil（图片与容器大小相同）

现在要将其转换为空间百分比，您只需除以容器的大小 (n) 即可得到

a(f-1)

或者除以图片的大小(fn)得到

a(f-1)/f

【讨论】：

这就是我没有找到记录的关于这个属性的事情。这有点奇怪，似乎没有经过深思熟虑......但我们需要按原样使用它:) 所以你能否也给我一个提示如何转换这个 match 空间百分比？并且：与 px 的行为是否相同？

我猜它是属性关键字的扩展。当您指定中心时，您将图像的中心定位在容器的中心。当您指定正确时，您将图像的右侧定位在容器的右侧......绝对值（px 或其他）按照您期望的方式工作:-) 我会尽力为您提供你问的公式

我认为 a=x/100 或 x=a/100。

并且图像在容器中的位置应指定为 an-afn=an(1-f) 以像素为单位。 codepen.io/Mohsenme/pen/KMgBew

有人在这里看到了这个css-tricks.com/i-like-how-percentage-background-position-works