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-size为50％：http://jsfiddle.net/60jtpust/8/

时有效

Answer 1

问题在于

<强> 3.9。调整图片大小：“background-size”属性

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

和

<强> 3.6。定位图片：“background-position”属性

百分比：请参阅background positioning area 减去的大小   背景图像的大小，[...]图像的大小   大小由'background-size'给出。

因此，如果您使用background-size 100%，则background-position的百分比将引用0。所以它将是0。

Answer 2

background-position的百分比值与background-size相关的时髦行为，我在this answer中深入解释，并附有滑动拼图类比。不幸的是，由于背景图像完全由于background-size: 100%而适合框，因此您将无法使用百分比值来定位它。从我的答案的最后一段：

如果要定位尺寸为背景区域100％的背景图像，则无法使用百分比，因为您无法完美地移动适合其框架的图块（顺便提一下对于最无聊的谜题或完美的恶作剧）。这适用于背景图像的内在尺寸是否与元素的尺寸匹配，或者您是否明确设置background-size: 100%。因此，要定位图像，您需要使用绝对值（完全放弃滑动拼图类比）。

它与background-size: 50%一起使用的原因是因为图像现在有空间可以移动。与此同时，滑动拼图类比现在变得平淡，因为您为background-position设置的百分比值大于100％......

无论如何，在您的具体示例中，绝对值分别等于元素的width和height属性（注意：不是实际图像尺寸）：

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

Updated fiddle

如果您无法对这些值进行硬编码，例如如果您需要此效果应用于不同大小的元素，那么很遗憾，您将无法使用background-position来隐藏图像。

使用background-size时忽略CSS background-position

2 个答案: