CSS背景位置的逻辑解释？答案

【问题标题】：Logical explanation for CSS background-position?CSS背景位置的逻辑解释？
【发布时间】：2013-05-07 12:08:06
【问题描述】：

对于一个有很多图标的应用程序，我想制作一个图像精灵。自从我在网页设计/前端 webdev 领域开始我的“冒险”以来，我一直在想：background-position: (left)<number>px (top)<number>px; 背后的逻辑是什么

当您将此与填充或边距的简写属性进行比较时（仅指定顶部和左侧时），它们都是property: (top)<number>px (left)<number>px; 所以 top 和 left 的值是相反的。

另外，假设我有一个 64 像素（长度）x 16 像素（高度）的精灵，总共包含 4 个 16x16 图标。获取精灵中的第二个图标 (|____|_this_|___|____|），您必须输入 background-image: -16px 0px; 而不是 16px 0px（这是合乎逻辑的，因为第二个图标比第一个晚 16 像素开始）。

如果您想要一个示例（我知道 w3schools 并不总是正确的，但它可以用于示例）：http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

所以我的问题是：为什么 background-position 属性的所有值都像 ... 颠倒了？这背后有什么逻辑吗？ CSS 是否从右向左读取属性？

【问题讨论】：

因为您将它们水平或垂直向后移动，如果您想使用正值重新排列您的图标，以便您要使用的第一个图标位于最底部或最右侧，这方式 thenext 图标将具有正偏移值..
@JEES 是的，但是为什么这个属性会向后移动而不是向前移动，就像所有其他 CSS 道具一样？有逻辑吗？
顺便说一句，我认为当使用只有两个值的填充/边距速记时，它们不是指top 和left，而是top and bottom 和left and right。
即使对于其他 CSS 属性，假设您要移动某个 div 或另一个 div 内的图像，并且其原点位于 0,0 .. 您设置了一个负值以便转移它。
@JEES 是的！谢谢，我现在明白了。我过于关注精灵中图标位置的滑动，而不是整个精灵。 +1

标签： css css-sprites background-position

【解决方案1】：

当使用简写表示只有两个值的边距（或填充）时，您没有设置 X/Y 位置 - 您正在设置四个边距，对顶部和底部（垂直边距）使用相同的值，以及右 &左（水平边距）。您还可以传递四个值，它们将从 margin-top 开始并围绕框顺时针继续（顶部 -> 右侧 -> 底部 -> 左侧）。

我通常记得使用“麻烦”这个词而不带任何元音 (TRBL)。

无论如何：对于定位只有两个值，通常的做法是先使用垂直轴（x轴，0是顶部）然后水平（y轴，0是顶部）左），因此在背景位置上为 y 轴使用负值会将背景移动到与移动框相同的方向，如果你要给它一个负的左边距。

.class1 {
    background-position: -20px 0; // move background 20px left
    margin-left: -20px; // move box 20px left (margin, following items will also move)
}

.class2 {
    position: relative;
    left: -20px; // move box 20px left (position, following items will stay put)
}

所以我想我想说的是价值观基本上是一致的，这取决于你如何看待它；）

Docs for margin (check the syntax list)

【讨论】：

感谢您在 JEES cmets 中提供答案背后的原理。