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

Question

我正在编写一个小WP主题，并需要一些新的CSS3背景大小属性的帮助。

我有一个DIV，其中包含一个图像作为背景。图像本身被设置为比div更大，以显示对原始图像的一点删减：

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

到目前为止一切都很好。但是，如果大小为≥100%，则调用后台位置属性会变得很棘手。我组装了一个JS/CSS游乐场进行测试：

• 如果图像是≤99%宽，较少的背景位置-x意味着图像左转.
• 如果图像是100%宽的，背景位置x就什么都不做了。
• 如果图像是≥101%宽，较少的背景位置-x意味着图像正确.

对于以下情况，我计算了：

• 大集装箱:350 x350 Big
• 图片: 540x359px
• 平均：(100/350) * 540≙154%宽
• (100/350) * 359≙102%高。
• 亦:职位-x：-28%及职位-y：-0.28%

所以我呈现了一页(包括。自动计算)，并且大小大约是正确的大小。但正如我所说，背景位置减少-x (-28%)意味着图像正确，图像有错误的位置。

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

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

编辑： 这里也有一个JSFiddle

这里有一张图片来说明我的目标…

​

Answer 1

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

所以，如果您想要以图像为中心，这意味着图像的中心在容器的中心。因此，这是您通过尝试和错误找到的值。

这里的关键是50%，因为背景位置总是以图像为中心，并且您不需要任何计算。

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

这个的公式

如何从百分比转换为px (按要求)。假设您有一个容器o大小为n，并且图像比f大一个因子，您可以指定x%的背景位置。我们认为这是一个单一因子a as a=x*100

在容器中匹配的位置是和。图像中要匹配的位置是afn。来自容器的图像的位置是不同的，afn-an，可以给出an(f-1)。

这就解释了为什么：

当f>1时，该性质的表观结果是相反的。(图像比容器大。

当f=1时(图像大小与容器大小相同)时，结果为零。

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

a(f-1)

或者除以图像(fn)的大小来给出

a(f-1)/f