使用背景大小时忽略CSS背景位置[重复]答案

【问题标题】：CSS background-position ignored when using background-size [duplicate]使用背景大小时忽略CSS背景位置[重复]
【发布时间】：2015-02-19 16:59:41
【问题描述】：

我正在尝试使用background-position 隐藏background-image（使用background-size 缩放）。

我故意不使用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/

【问题讨论】：

我可以回答为什么background-position 不适用于background-size: 100%，但不幸的是，我想不出一个不会触发回流的解决方案，因为你基本上除非您事先知道确切的像素值，否则将无法使用background-position。对前者的回答就足够了吗？
~~幸运的是，我的背景图片位于一个绝对定位的伪元素内，该伪元素源自一个带有overflow:hidden 的元素。有了它，我就可以使用left:auto; right:100% 将其置于视线之外。~~
这其实很聪明。另外，我看到有人继续发布了一个答案，只是对规范进行了解释-我有不同的解释，但是如果您了解规范的含义，那么我的解释就没有必要了；）
:) 我的幸运消失了。 left 由于重新布局引起了同样的波动。 csstriggers.com
嗯，知道你已经帮助过别人了——那个网站太棒了，我不知道它的存在。感谢您的链接！

标签： css

【解决方案1】：

问题是

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

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

和

3.6.定位图像：“background-position”属性

百分比：指background positioning area的大小减背景图像的大小，[...] 其中图像的大小是大小由‘background-size’给出。

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

【讨论】：

我想我必须找到另一个解决方案。静态仓位在短期内可能没问题，但长期来看就会有问题。

【解决方案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 隐藏图像。

【讨论】：