Html CSS3背景尺寸和背景位置问题

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

我有一个DIV，其中包含一个图像作为背景。图像本身设置为大于div，以显示原始图像的一点剪切：

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

到目前为止一切都很好。但是，如果大小为≥ 100%. 我准备了一个小JS/CSS游乐场进行测试：

• 如果图像是≤ 99%宽，更少的背景位置x表示图像向左移动
• 如果图像宽度==100%，则background-position-x不起任何作用
• 如果图像是≥ 101%宽，更少的背景位置-x表示图像向右

对于以下情况，我计算：

• 大容器：350x350px
• 图片：540x359px
• 平均数：（100/350）*540≙ 154%宽度
• （100/350）*359≙ 102%的高度
• 另外：位置-x:-28%和位置-y:-0.28%

因此，我呈现了一个页面（包括自动计算），大小大致正确。 但正如我所说的，背景位置-x（-28%）越少，意味着图像越正确，图像的位置就越错误

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

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

编辑：

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

---

问题的关键在于，指定的百分比给出了容器和图像的匹配点。该点在图像和容器中都进行计算

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

这里的关键点是50%，因为背景位置始终将图像居中，并且您不需要任何计算

如果为属性指定10%，则表示图像中距离左侧10%的点位于容器中距离左侧10%的点

这个公式

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

容器中要匹配的位置是an。要在图像中匹配的位置为afn。来自容器的图像的位置是差值，afn-an，可以表示为an（f-1）

这就解释了为什么：

当f>1时，该特性的明显结果相反。（图像比容器大

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

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

a（f-1）

或者除以图像的大小（fn），得到

---

a（f-1）/f

如果您能将问题与真实图像的链接放在一起演示，我们将更容易为您提供帮助。另外，对于记录

背景位置：0 0

是有效语法。

background-position-x

和

background-position-y

实际上不是W3C规范的一部分，也不受支持在Firefox或Opera中使用RTE。关于background-position-x/y，你是对的。我想这样读会更容易。我在Safari上开发，所以它会工作。但我在上网时会删除此语法。所以这是一种生产状态：）几分钟后我会整理好一把小提琴。好了，这就是我没有发现的关于这处房产的事情。这有点奇怪，而且似乎没有得到很好的考虑。。。但是我们需要按原样使用：）那么你能给我一个提示，如何将这个匹配百分比转换成空间百分比吗？和：px的行为是一样的吗？我猜这是属性关键字的扩展。指定“中心”时，将图像的中心定位在容器的中心。当您指定right时，您将图像的右侧放置在容器的右侧。。。绝对值（px，或其他任何值）的工作方式与您期望的一样：-）我将尝试给您一个公式，您认为a=x/100或x=a/100。容器中图像的位置应以像素为单位指定为afn=an（1-f）。有人在这里看到了这个