Question

我有一堆图像，我已整合到一个png中。我试图使用这些图像来制作CSS精灵类。

<style>
img.plusOne
{
width:50px;
height:50px;
background:url(acknowledgement.png) 0 0;
}
</style>

<body>
<img class="plusOne" src="acknowledgement.png" width="1" height="1" />
</body>

不是在png中显示50px乘50px的第一个图标，而是整个png文件被挤压成50 x 50的图标。

Answer 1

那是因为<img>加载并显示整个图像。

通常人们使用<div>或<span>标记与display:inline-block作为精灵，而不是<img>

Answer 2

想想它就像这样。

你有一个窗口。人站在窗前，现在你无法透过窗户看到您需要做的是将人设置为透明，以便您可以透过窗口看到。

img class =“plusOne”中的图像src =“acknowledgement.png”width =“1”height =“1”/＆gt;需要是透明的GIF或PNG才能正确识别。您不希望它与用于背景图像的图像相同。

您可以在此处下载透明GIF： http://www.unifiedwealthplanning.com/images/spacer.gif

代码中的示例：

<img class="plusOne" src="http://www.unifiedwealthplanning.com/images/spacer.gif" width="1" height="1" />

Answer 3

使用此工具为现有精灵生成CSS - http://www.spritecss.com/

css精灵故障

3 个答案: