css - 如何拥有多个 css 裁剪 Sprite ？

Question

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

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

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

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

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

Answer 1

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

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

如果“在另一个之上”意味着垂直堆叠，那么我的猜测是 wrapper 需要float: left 才能排成一排。这仍然与剪辑无关。