在屏幕上调整大小的导航菜单PNG调整大小

Question

我有一个由PNG图标组成的导航栏。在调整页面大小或在其他窗口上显示时，图标不会移动，因此无法切断。我无法找到一种方法来调整不同屏幕上的图标大小，并将图标悬停在白色上？我知道，因为它们是.png的，我可能不得不用白色来创建所有的图标？

反正你可以在http://www.ssangar.com/ 现场看到这里是我的资产净值代码： http://cdpn.io/msjzi

提前感谢！

Answer 1

我不太清楚，如果我理解你的问题100％，但就像Racil说的那样，你想创建一个CSS，并将其设置为百分比或像素...

如果你想添加一些转变，我用这个代码在我的网站：

  nav li a:hover, nav li a.current { 
      color: #0099CC; 
      -o-transition: background 0.3s linear 0s, color 0.3s linear 0s; 
      -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s; 
      -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s; 
      -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s; 
      transition: background 0.3s linear 0s, color 0.3s linear 0s;} 

所有不同的转变背后的原因是对所有旧的浏览器不接受过渡代码。

* 注：您需要在您的CSS代码，以提供更多的导航信息，上面是只让它有一个过渡效果.. *

Answer 2

根据你想要达到的目标，而不是用白色创建另一组图标，你可能会使用不透明alpha层。检查this tutorial。这里有最基础的：

.myMenuItem:hover 
{ 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

至于调整大小，你可以简单地将大小设置为百分比：

.myMenuItem 
{ 
width: 30%; 
height: 20%; 
} 

您还可以使用transition或transform添加一些效果：

transform: scale(.5); 
transition:width 0.5s ease;