css精灵故障

Itc*_*ych 0 html css css-sprites

我有一堆图像,我已合并到一个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>
Run Code Online (Sandbox Code Playgroud)

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

Nie*_*sol 5

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

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

  • 是的,但请注意他们图像的`src`:图像本身只是一个透明的盒子,而不是spritesheet.W3Schools是一个非常不可靠的学习来源,[不应该被信任](http://w3fools.com/) (6认同)
  • List Apart有一篇关于精灵的精彩文章:http://www.alistapart.com/articles/sprites (2认同)