使用背景大小时忽略 CSS 背景位置

Question

我试图隐藏background-image（即进行缩放background-size）使用background-position。

我故意不使用visibility或任何会导致重新布局的东西，因此在切换回视图时会导致渲染输出的轻微波动。此外，我当前的应用程序限制我使用伪元素作为黑客/解决方法。

div {
    background: url(image.png) no-repeat 200% 200%/100%;
    height: 100px;   /* half height of image */
    width: 250px;    /* half width of image */
}

不幸的是，图像没有定位。如果/100%取下 ，则定位工作正常。

jsfiddle：http : //jsfiddle.net/prometh/60jtpust/

更新：
奇怪的是，它在background-size50% 时工作：http : //jsfiddle.net/60jtpust/8/

Answer 1

问题是

3.9. 调整图像大小：' background-size ' 属性

百分比是相对于背景定位区域的。

和

3.6. 定位图像：“背景位置”属性

百分比：指的是背景定位区域的 大小减去背景图像的大小，[...] 其中图像的大小是由 ' background-size '给出的大小。

因此，如果您使用background-sizeof 100%，则百分比background-position将参考0。所以会的0。