图片精灵有白色的背景和错误的位置

Question

我对图像精灵不是很有经验，所以这里是问题..

我在网上做了一个图像精灵;这是代码：

.sprite-slidebutton { 
    background-position: 0 0; 
    width: 70px; 
    height: 63px; 

} 

.sprite-slidecross { 
    background-position: 0 -113px; 
    width: 70px; 
    height: 63px; 
} 

我得到的图片，我下载到我的网页，我打电话给任何想要它的.png。它确实出现！而精灵正在工作，图像切换像我想要它..

但PNG不显示透明背景：S也是图像不在中间，我只看到两个图像的一半。 。在哪里以及如何调整？

要查看直播：

解决

Answer 1

如果我猜我会说有一个与图像中的阿尔法值的问题。下载gimp并看看它们是什么。

Answer 2

该png可能有一个白色的背景，而不是一个透明的背景。这是你需要在Photoshop，GIMP或类似的编辑。

只要看到图像的一半，它可能是由于您分配类的元素。如果它的内联元素如<a>或<span>。尝试添加“显示：块;”在sprite-slidebutton类中。