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

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

如果我不得不猜测我会说图像中的alpha值存在问题。下载gimp并查看它们是什么。

Answer 2

png可能有白色背景，而不是透明背景。这是你需要在photoshop，gimp或类似的东西中编辑的东西。

只要看到一半的图像，因为你要将类分配给它。如果它是一个内联元素，如<a>或<span>。尝试添加“display：block;”在sprite-slidebutton类中。