0

我有一堆图像已合并为一个 png。我正在尝试使用这些图像来制作 css sprite 类。

<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 x 50px 的图标，而是将整个 png 文件压缩成一个 50 x 50 的图标。

4

3 回答 3

5

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

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

于 2012-12-28T16:59:10.897 回答
1

完全像这样想。

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

img class="plusOne" src="acknowledgement.png" width="1" height="1" /> 中的图像需要是透明的 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" />
于 2012-12-28T17:11:07.157 回答
0

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

于 2017-03-23T05:27:10.610 回答