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

Question

我正在编写一个小的 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

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

Answer 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