html - 如何在 Metro 应用程序中自定义 Appbar 命令图像？

Question

我有一个 Metro 应用程序，我试图在其中实现 Appbar 命令控制。能够显示带有一些图像的 Appbar，但问题是当我突出显示(悬停)时图像正在移动。我的一些代码在这里

.homebtn1 .win-commandimage{ background-image: url('/images/homeActive.png');<br/>
width:140px;
height:75px;
};

.appbarExtraClass .win-commandicon
{
height:75px;
width:140px;
margin:0px 2px 2px 2px; 
}

任何人都可以告诉我我需要对上面的 css 进行哪些更改才能使图像保持不变。

谢谢。

Answer 1

您可以使用 :disabled :hover 和 :active 伪选择器并将它们应用到您的 appBar。样式很可能是使按钮稍微移动的原因。本文介绍了一些操作方法 http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx

这篇博文展示了很多应用栏按钮的着色和自定义 http://blogs.msdn.com/b/shawnste/archive/2012/07/17/colorizing-a-modern-win8-javascript-appbar-and-appbarcommands.aspx