Question

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

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

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

如果你想要一个例子（我知道w3schools并不总是正确的，但它会做的例子）：http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

所以我的问题是：为什么背景位置属性的所有值都像......反转？它背后有什么逻辑吗？ CSS是否从右到左阅读了该属性？

Answer 1

当仅使用两个值的边距（或填充）时，您没有设置X / Y位置 - 您设置四个边距，使用相同的顶部和底部值。底部（垂直边距），以及右边和右边左（水平边距）。您还可以传递四个值，它们将从margin-top开始，并在框周围顺时针继续（顶部 - ＆gt;右 - ＆gt;底部 - ＆gt;左）。

我通常记得这个用'＃34;麻烦＆＃34;没有任何元音（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)

CSS背景位置的逻辑解释？

1 个答案: