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时，我得到的结果与我在页面上尝试的结果相同：它们都是在彼此之上而不是在一行中。我试过单独包装它们，在包装上放一个宽度，相对定位，没有任何作用......

顺便说一下。两位作者同时使用两个班级。我有什么理由吗？鉴于有一个包装器，所有图像相同的类可以是嵌套的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，那么相互依赖是正确的行为。在position: relative;课程中使用.wrapper，但请注意图像的定位与图像的剪裁有关。

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

Answer 2

我想知道为什么精灵剪刀坚持放置相应的负左或顶部。我不应该接受这个作为一个谜，因为它正是理解的关键：Clip有一个奇怪的几何，整个画面都在那里，但只有rect在其未改变的（!!!）位置可见。然而，img标签只是一个矩形框。

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

如何拥有多个css剪切的精灵？

2 个答案: