0

我想要一排图像，我用 pnmcat -lr 将它们组装成一个。我不想要图像映射，因为这些碎片被交换为突出显示。我有有意义的图像，所以我想要<img>而不是背景。

有希望的例子似乎是http://css-tricks.com/css-sprites-with-inline-images/和http://1plusdesign.com/articles/css-clip-property-inline-image-sprites/。后者甚至显示一些html，连续三个img。

但是在下载演示时，它只是单独使用它们。当我粘贴演示 1 中的 div 时，我得到的结果与我在页面上尝试的任何内容相同：它们都在彼此之上，而不是在一行中。我试过单独包装它们，在包装纸上放一个宽度，相对定位它，没有任何效果......

顺便提一句。两位作者同时使用两个类。我有什么理由这样做吗？鉴于有一个包装器，所有图像都相同的类可以是嵌套的 css，然后另一个类可以是 id（如果它只使用一次），对吗？

.wrapper img {
    position:absolute;
    top:0;
    left:0;
}
#sad { clip: rect(0 128px 128px 0); }
4

2 回答 2

0

我想知道为什么精灵剪辑器坚持将相应的负数放在左或上。我不应该接受这是一个谜，因为它正是理解的关键：剪辑有一个奇怪的几何形状，整个图片都在那里，但只有矩形在其未更改的（！！！）位置可见。然而，img 标签只是矩形周围的一个框。

现在有了绝对位置和负左，我会将所有矩形拉到同一个位置。相反，我想要的是让它们更正确地移动以获得差距。有了http://makepp.sourceforge.net/中的标签栏，它在所有浏览器中的工作就像一个奇迹。

于 2012-01-10T23:13:26.227 回答
0

您没有显示足够的代码来提供明确的答案。

如果“彼此重叠”，您的意思是它们都在同一个地方，那么我的猜测是您的包装器没有该position: relative属性。因此，图像都相对于包装器的容器定位，而不是直接相对于包装器本身。如果将它们设置为top: 0; left: 0，则相互重叠是正确的行为。position: relative;在类上使用.wrapper，还要记住，图片的定位与图片的裁剪有关。

如果“彼此重叠”意味着垂直堆叠，那么我的猜测是包装纸需要float: left排成一排。这仍然与剪裁无关。

于 2012-01-09T02:16:46.590 回答