我喜欢百分比背景定位的工作原理

前几天，当我们在年鉴中详细介绍 background 属性时，我学到了一些东西。这是一个非常直观的东西，我想我以前从未停下来想过它。

默认情况下，background-position 为 0 0，即 左上角。现在假设您将其设置为 50% 0。该背景图像现在位于 顶部中央。它会计算出该图像的大小，并将图像的中心定位在元素的中心。

这与您使用 <img> 并将其定位在 left: 50%; 不同，在这种情况下，图像的左边缘将位于中点。如果您想将其居中，则需要将其向左拉回（负向平移或负向边距）。

以下是该差异的可视化

查看 Chris Coyier 在 CodePen 上的笔 background-position 和 left 之间的区别 (@chriscoyier)。

因此，如果您设置类似 background-position: 25% 25% 的内容，则会将图像定位，使其自身 25% 的宽度与元素 25% 的宽度对齐。垂直方向也是如此。

这里没有革命性的东西。我只是认为它设计得很巧妙。您不必过多考虑它，因为它就像您假设的那样工作。当然，如果我为 background-position 设置 右上，则图像将在右上角绘制。我不会考虑浏览器必须如何计算图像大小和元素大小并在这些位置对齐轴线。

Evan Wieland

# 2015年3月4日

有趣……

Amelia Bellamy-Royds

# 2015年3月4日

background-position 的工作方式的一个问题是，如果您想要负位置（例如图像精灵）。然后，它有点令人困惑，并且在规范中没有明确定义。

Rob Berrones

评论的永久链接# 2015年3月4日

对于精灵，我通常使用 px（和 -px），因为它更精确。然后在开发者工具中，您可以直接定位并将位置复制回您的代码。
Bob

评论的永久链接# 2015年3月5日

特别是对于我想包含块或内联块元素背景的图像的精灵，这也会让我感到困惑。找不到使其工作的方法……

Teelah

# 2015年3月4日

我现在总是使用百分比，尤其是在所有 CSS 中都具有响应性（除了精灵，使用像素似乎不太复杂。感谢分享！

Timothy Miller

# 2015年3月4日

规范作者实际上知道他们在说什么，是吗？:) 您也可以对实际图像执行此操作。这是一种技巧，但您可以使用 left 和 transform 模拟此行为

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Patryk

评论的永久链接# 2015年3月4日

Timothy，你确定你在说什么吗？:)
http://codepen.io/anon/pen/ogMdrq
David Buell

评论的永久链接# 2015年3月4日

在我看来 Patryk 是正确的？
Gary

评论的永久链接# 2015年3月4日

Timothy 说得很好。 Patryk，如果您在 Safari 或 Firefox 上使用它，请不要忘记包含供应商前缀。需要 -webkit-transform，并且它确实有效。
Bruno Cartaxeiro

评论的永久链接# 2015年3月5日

是的，Patryk，我想他知道自己在说什么……

谢谢，Timothy，这将非常有用。:)
Robert

评论的永久链接# 2015年3月5日

这太简单了。它在 Firefox 和 Chrome 中以及 IE 9 及以下版本中都能正常工作。有什么建议适用于 IE 9 以下版本？
Timothy

评论的永久链接# 2015年3月5日

感谢大家的支持。:) Robert，我认为对于 IE<9，您几乎唯一的选择是表格（CSS 表格布局，可能不是实际表格）。像这样。它没有那么好，可能需要多做一些工作，但如果您没有做任何太疯狂的事情，它会运行得很好！

Klesus

# 2015年3月4日

| 您不必过多考虑它，因为它就像您假设的那样工作。

实际上，当在 background-position 中使用 % 时，行为会根据 background-size 而变化。如您的示例所示，背景图像小于其所在的容器，并且 x 轴的增量将使背景向右移动。但是，如果您将 background-position 设置为大于其容器的大小，则 x 轴的增量将使其向左移动。我还没有尝试更改 y 轴的值，但我假设情况相同。

Taufik Nurrohman

# 2015年3月5日

现在我正在考虑如何使用百分比单位从底部右侧设置背景图像位置。

RLa

# 2015年3月5日

我认为一旦您还以百分比设置 background-size，它就会变得更加复杂:)

Valerio

# 2015年3月5日

能够获得一个额外的值来设置距右侧的距离将非常棒，这是唯一缺少的东西

Chris Coyier

评论的永久链接# 2015年3月5日

查看四值语法：https://css-tricks.cn/almanac/properties/b/background-position/

Taufik

# 2015年3月6日

谢谢。现在已经可以工作了。这是另一种方法

/* same with `30%` from `top` and `left` position */
body {
  background: url('foo.png') no-repeat 70% 70%;
}

/* same with `30px` from `top` and `left` position */
body {
  background: url('foo.png') no-repeat calc(100% - 30px) calc(100% - 30px);
}

shawn

# 2015年3月5日

如果您可以告诉它保持背景图像尺寸的比例，那么整个背景规范将变得更好。我想这实际上更多地与 background-size 有关。因此，也许 background-size:50% keep-ratio/true; 可以工作。并且类似 bg-size:fit keep-ratio/true; 也将是很棒的。

Taufik

评论的永久链接# 2015年3月6日

尝试 background-size:50% auto;

Stephen Bell

# 2015年3月5日

这是一个与百分比相关的 background-position 技巧，我发现它非常有用

.mydiv {
     background-image: url(/images/mybackground-jpg);
     background-size:cover;
     background-position:25% 75%;
}

这将加载一个覆盖整个 div 的背景图像，然后 在 div 中的百分比位置固定图像中的一个点（图像中 25% 宽度的点和 75% 高度的点将保持在 div 中的 25%/75%）。这意味着您可以加载一个具有焦点点的图像，并确保该点无论包含 div 的纵横比如何都保持可见。

一个使用非常高图像的示例，在不同断点处大小和形状发生变化的 div 中使用：http://www.oc.edu/alumni/vision/summer-2014/oc-grad-lost-on-malaysia-flight/

Monsta

# 2015年3月6日

你们真正想要的是 jQuery 焦点：http://jonom.github.io/jquery-focuspoint/demos/helper/index.html

Auginator

评论的永久链接# 2015年3月9日

不错！我为 Jonom 的非常酷的插件制作了该工具！很高兴有人喜欢它！

此评论线程已关闭。如果您有重要信息需要共享，请联系我们。