0

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

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

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

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

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

4

1 回答 1

1

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

我通常记得使用没有任何元音的“麻烦”一词（TRBL）。

无论如何：定位只有两个值，通常使用垂直轴（x轴，0是顶部）然后水平（y轴，0是左），所以使用负值background-position 上的 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)
}

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

边距文档（检查语法列表）

于 2013-05-07T12:23:27.380 回答