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的图标.
那是因为<img>加载并显示整个图像.
通常人们使用<div>或<span>标记display:inline-block为精灵,而不是<img>