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％，背景位置x越小意味着图像向左移动。
• 如果图像= = 100％宽，则background-position-x不执行任何操作
• 如果图像宽度≥101％，背景位置x越小意味着图像正确。

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

• 大容器：350x350px
• 图片：540x359px
• 表示：（100/350）* 540≙154％宽度
• （100/350）* 359≙102％身高。
• 另外：position-x：-28％和position-y：-0.28％

所以我渲染了一个页面（包括自动计算），大小大小合适。 但正如我所说，较少的背景位置-x（-28％）意味着图像正确，图像的位置错误。

它必须向左移动，因为我计算了-28％“左边距”。所以我做了一些试验和错误，事实证明正确的位置将达到50％左右。

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

编辑： here is an JSFiddle too

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

Answer 1

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

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

此处的关键是50％，因为背景位置始终会使图像居中，并且您不需要任何计算

如果为属性指定10％，则表示图像左侧10％处的点位于容器左侧10％处。

此

的公式

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

容器中匹配的位置是 a 。图像中匹配的位置是 afn 。容器中图像的位置是差异， afn-an ，可以 a（f-1）给出。

这解释了原因：

当f> 1时，属性的表观结果被反转。 1。 （图像比容器大。

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

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

<强>一（F-1）

或除以图片（fn）的大小以提供

<强>一（F-1）/ F