如何拥有多个 css 裁剪精灵？
我想要一排图像，我用 pnmcat -lr 将它们组合成一个。我不需要图像映射，因为这些片段会被交换以突出显示。我有有意义的图像，所以我想要
有前途的例子似乎是 http://css-tricks.com/css-sprites -with-inline-images/ 和 http://1plusdesign.com/articles/css-clip-property-inline-image-sprites/。后者甚至显示一些 html，连续三个图像。
但下载演示时，它仅单独使用它们。当我粘贴演示 1 中的 div 时，我得到的结果与我在页面上尝试的任何结果相同：它们都在彼此之上，而不是排成一行。我尝试过单独包装它们，在包装纸上放置宽度，相对定位，但没有任何效果......
顺便说一句。两位作者同时使用两个类。我这有什么理由吗？假设有一个包装器，那么所有图像都相同的类可以是嵌套的 css，然后另一个类可以是 id（如果仅使用一次），对吧？
.wrapper img {
position:absolute;
top:0;
left:0;
}
#sad { clip: rect(0 128px 128px 0); }
I want to have a row of images, which I have assembled into one with pnmcat -lr. I don't want an image map, because the pieces get exchanged for highlighting. I have meaningful images, so I want <img> rather than background.
Promising examples seem to be http://css-tricks.com/css-sprites-with-inline-images/ and http://1plusdesign.com/articles/css-clip-property-inline-image-sprites/. The latter even shows some html, with three imgs in a row.
But when downloading the demo, it only uses them separately. And when I paste in the div from demo 1, I get the same result as whatever I try on my page: they are all on top of one another rather than in a row. I have tried wrapping them separately, putting a width on the wrapper, positioning it relatively, nothing works...
Btw. both authors use two classes simultaneously. I there any reason for this? Given that there is a wrapper, the class that is the same for all images could be a nested css, and then the other class could be an id (if it's used only once), right?
.wrapper img {
position:absolute;
top:0;
left:0;
}
#sad { clip: rect(0 128px 128px 0); }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您没有显示足够的代码来提供明确的答案。
如果“在彼此之上”，您的意思是它们都在同一个位置，那么我的猜测是您的包装器没有
position:relative属性。因此，图像都是相对于包装器的容器定位的，而不是直接相对于包装器本身定位的。如果它们设置为top: 0; left: 0，那么相互重叠就是正确的行为。在.wrapper类上使用position:relative;，但还要记住图像的定位与图像的裁剪有关。如果“一个在另一个之上”意味着垂直堆叠，那么我的猜测是包装器需要
float: left才能排成一排。这仍然与剪辑无关。You didn't show enough of your code to provide a definite answer.
If by "on top of one another", you mean they're all in the same place, then my guess is that your wrappers don't have the
position: relativeproperty. So, the images are all positioned relative to the container of the wrappers rather than directly relative to the wrappers themselves. If they're set totop: 0; left: 0, then being on top of each other is the correct behavior. Useposition: relative;on the.wrapperclass, but also keep in mind that the positioning of the image is related to the clipping of the image.If "on top of one another" means stacked vertically, then my guess is that the wrappers need to
float: leftto sit in a row. This still has nothing to do with the clipping.我想知道为什么精灵剪辑器坚持在左侧或顶部放置相应的负值。我不应该认为这是一个谜，因为它正是理解的关键：剪辑有一个奇怪的几何形状，整个图片都在那里，但只有矩形在其不变的（!!!）位置可见。然而，img 标签只是矩形周围的一个框。
现在有了绝对 pos 和负向左，我会将所有矩形拉到相同的位置。相反，我想要的是将它们稍微向右移动以获得间隙。这样， http://makepp.sourceforge.net/ 中的标签栏在所有浏览器中都可以发挥作用。
I wondered why the sprite clippers insist on putting a corresponding negative left or top. I shouldn't have accepted this as a mystery, because it is exactly the key to understanding: Clip has a strange geometry, the whole picture is there, but only the rect is visible at its unchanged(!!!) location. The img tag however is a box only around the rect.
Now with absolute pos and negative left I would pull all the rects to the same position. Instead, what I want is to move them even a little more right to get gaps. With that the tab bar in http://makepp.sourceforge.net/ works like a marvel in all browsers.